为啥打开对话框后我的 jQuery 选择器会失败？

Posted 2023-05-08

【中文标题】为啥打开对话框后我的 jQuery 选择器会失败？

【英文标题】：Why does my jQuery selector fail after a dialog is open?为什么打开对话框后我的 jQuery 选择器会失败？

【发布时间】：2014-04-25 01:10:40

【问题描述】：

我被这个 jQuery 选择器问题弄得焦头烂额。我编写了一些代码，以便当用户将文件拖入页面时，它会弹出一个 jQuery 对话框，显示已被拖入的文件列表，并带有一些用于管理列表的按钮。如果该对话框已打开，则放入的下一个文件应更新该对话框（当前已打开）。代码如下：

$(document).ready(function() 
    var updateDialog = function () 
            ....
            $("#my-selector").text(getMyString());
    ; 
    setDragDropHandler("#main-dropzone", function (f) 
           doSomethingWithFiles(f);
           $("#my-dialog").dialog("open");
   );
   $("#my-dialog").dialog(
           ...
           open: function () 
                 updateDialog();
                 setDragDropHandler("#dialog-dropzone", function (f) 
                          doSomethingWithFiles(f);
                          updateDialog();
                 );
           
   );
);

编辑：我忘了提到我的setDragDropHandler 为一个 div 选择了一个选择器，当文件被拖动时，它使用replaceWith 替换为一个显示“将文件放到这里”的 div , 但在删除文件时替换它。 #my-selector 是 #dialog-dropzone 的子代，因此它最终会被替换。

当我将第一个文件拖入时，对话框可以正常打开并在#my-selector 中输入正确的文本。当我将后续文件拖入时，对话框打开时，$("#my-selector")[0] 未定义，因此对话框不会更新。如果我执行以下操作，它将按预期工作：

$(document).ready(function() 
    var stupidHack = $("#my-selector");
    var updateDialog = function () 
            ....
            stupidHack.text(getMyString());
    ; 
    // rest is the same
);

从我的变量名可以看出，我不喜欢这个解决方案。谁能解释第一版失败的原因？

【问题讨论】：

有没有可能把它打包成小提琴？

在没有太多关于项目的上下文的情况下，我可以提出一个论点，即根据您页面的复杂性，执行“愚蠢的 hack”并获取对您的元素的引用会更有效每次更新时都必须扫描 DOM 以找到 #my-selector。

@sabof 现在，当前页面的文件太多了……我看看能不能用一个简单的小提琴来重现

@Vizkos 很公平......但是对于我自己的启发，你知道它为什么会失败吗？

假设我理解正确，该问题仅在#my-dialog 打开时出现。我建议尝试使用父元素选择#my-selector，例如 $("#my-selector", "#someParentOnTheDOM") 并看看会发生什么。还值得验证 #my-selector 是否不是如何从 DOM 中删除的。

【参考方案1】：

废话，我的拖放处理程序在替换 DOM 元素之前调用了回调。哎呀...