Javascript jquery事件绑定的奇怪行为

以下是jquery masters的一个示例：

这项工作：

$(function (){
    $("#<?= $gridArr['event_id'] ?> .gallery-add").each(function() {
        var $dialog = $("<div></div>");
        var $link = $(this).one("click", function() {
            $dialog
                .load($link.attr("href"))
                .dialog({
                    modal: true,
                    width: 520,
                    height: 180,
                    title: $link.attr("title")
                });
            $link.click(function() {
                $dialog.dialog("open");                                    
                return false;
            });        
            alert('clicked');           
            $(document).bind('uploadDone', function(e) {
               // alert("dialogCloser triggered in dialog function");
                $dialog.dialog("close"); 
                $("#<?= $gridArr['uniq'] ?>-event-path-form-submit").trigger('click');   
            });                         
            return false; 
        });

    });
});

非常感谢大家的帮助。以下是我为使其正常工作所做的更改：

• 在全局范围内的函数外部声明$dialog
• 在创建$link之前，将uploadDone事件侦听器绑定到$dialog。单击（）
• 将id=“22”更改为id=“event_22”原因在html<5中，id必须以alpha字符开头

---

我不知道该接受谁的答案，但我当然感谢您的帮助。

警报语句很可能导致一个块，使上面的代码在下面的代码执行之前有时间完成。我的猜测是，如果没有警报，它将在完成上载之前返回false。

警报语句很可能导致一个块，使上面的代码在执行下面的代码之前有时间完成。我的猜测是，如果没有警报，它会在上传完成之前返回false。

我的猜测是，对话框是在uploadDone事件绑定之前加载的。是否有理由将其绑定到click事件处理程序中，而不是在创建时

$(function (){
  $("#<?= $gridArr['event_id'] ?> .gallery-add").each(function() {
    var $dialog = $("<div></div>");
    var $link = $(this).one("click", function() {
        $dialog
            .load($link.attr("href"))
            .dialog({
                modal: true,
                width: 520,
                height: 180,
                title: $link.attr("title")
            });
        $link.click(function() {
            $dialog.dialog("open");                                    
            return false;
        });           
        return false; 
    });
    $(document).bind('uploadDone', function(e) {
        // alert("dialogCloser triggered in dialog function");
        $dialog.dialog("close"); 
        $("#<?= $gridArr['uniq'] ?>-event-path-form-submit").trigger('click');   
    }); 

  });
});

$（函数（）{
$（“#.gallery add”）。每个（函数（）{
变量$dialog=$（“”）；
var$link=$（this）.one（“单击”，函数（）{
$dialog
.load（$link.attr（“href”））
.对话({
莫代尔：是的，
宽度：520，
身高：180，
标题：$link.attr（“标题”）
});
$link.click（函数（）{
$dialog.dialog（“打开”）；
返回false；
});           
返回false；
});
$（document）.bind（'uploadDone'，函数（e）{
//警报（“对话框功能中触发的dialogCloser”）；
$dialog.dialog（“关闭”）；
$（“#-事件路径表单提交”）.trigger（'click'）；
}); 
});
});

---

如果您总是希望在上传完成时关闭所有对话框，那么这似乎应该是可行的。但是，就像大卫在你问题的评论中说的。。。一些上下文可能会有所帮助

我的猜测是，对话框是在uploadDone事件绑定之前加载的。是否有理由将其绑定到click事件处理程序中，而不是在创建时

$(function (){
  $("#<?= $gridArr['event_id'] ?> .gallery-add").each(function() {
    var $dialog = $("<div></div>");
    var $link = $(this).one("click", function() {
        $dialog
            .load($link.attr("href"))
            .dialog({
                modal: true,
                width: 520,
                height: 180,
                title: $link.attr("title")
            });
        $link.click(function() {
            $dialog.dialog("open");                                    
            return false;
        });           
        return false; 
    });
    $(document).bind('uploadDone', function(e) {
        // alert("dialogCloser triggered in dialog function");
        $dialog.dialog("close"); 
        $("#<?= $gridArr['uniq'] ?>-event-path-form-submit").trigger('click');   
    }); 

  });
});

$（函数（）{
$（“#.gallery add”）。每个（函数（）{
变量$dialog=$（“”）；
var$link=$（this）.one（“单击”，函数（）{
$dialog
.load（$link.attr（“href”））
.对话({
莫代尔：是的，
宽度：520，
身高：180，
标题：$link.attr（“标题”）
});
$link.click（函数（）{
$dialog.dialog（“打开”）；
返回false；
});           
返回false；
});
$（document）.bind（'uploadDone'，函数（e）{
//警报（“对话框功能中触发的dialogCloser”）；
$dialog.dialog（“关闭”）；
$（“#-事件路径表单提交”）.trigger（'click'）；
}); 
});
});

---

如果您总是希望在上传完成时关闭所有对话框，那么这似乎应该是可行的。但是，就像大卫在你问题的评论中说的。。。一些上下文可能会有帮助

您是否可以显示浏览器jQuery中显示的渲染结果；因为我很确定

是一个服务器端脚本？JavaScript，因此jQuery，在客户端工作，所以服务器端是不相关的。还有，什么是相关的HTML？我很想知道，但是这个块是由ajax加载的，所以firefox视图源代码没有显示它，而且由于某些原因，它在firebug中也不可见。是的，这些是php短标记，带有一些您想要检查的唯一变量。这些可能有问题。要部分回答您的问题，请输入一个数值。div的id=“22”因此#将替换为#22您是否可以显示浏览器jQuery中显示的渲染结果；因为我很确定

是一个服务器端脚本？JavaScript，因此jQuery，在客户端工作，所以服务器端是不相关的。还有，什么是相关的HTML？我很想知道，但是这个块是由ajax加载的，所以firefox视图源代码没有显示它，而且由于某些原因，它在firebug中也不可见。是的，这些是php短标记，带有一些您想要检查的唯一变量。这些可能有问题。要部分回答您的问题，请输入一个数值。div的id=“22”因此#将被#22I替换为#22I在link函数之外尝试了这一点，它不会触发uploadDone。我假设这是因为$dialog.dialog发生在$link的内部。如果我想在$link外部绑定uploadDone，我如何在该函数外部正确引用该对话框？将它绑定到外部是有意义的，但我不知道如何在该范围内引用它。我尝试了$link.$dialog，但没有骰子。谢谢。让我们确定我们在这里谈论的是同一件事。uploadDone回调是否触发与引用$dialog变量或其上的.dialog（）方法无关。如果取消对该警报的注释（“dialogCloser…”）；在我的例子中，这会被触发吗？您是否可以从触发uploadDone事件的任何事件中添加代码片段和解释？再次测试，但在您的示例中不会触发它。加载上载成功框架时，它将运行：parent.$（parent.document）.trigger（“uploadDone”）；我知道这是有效的，因为它会在存在alert语句时触发uploadDone。我在link函数之外尝试了这个方法，但它不会触发uploadDone。我假设这是因为$dialog.dialog发生在$link的内部。如果我想在$link外部绑定uploadDone，我如何在该函数外部正确引用该对话框？将它绑定到外部是有意义的，但我不知道如何在该范围内引用它。我试过$link。$d

parent.$dialog.dialog("close");
parent.$dialog.trigger( 'uploadDone' );

$(function (){
  $("#<?= $gridArr['event_id'] ?> .gallery-add").each(function() {
    var $dialog = $("<div></div>");
    var $link = $(this).one("click", function() {
        $dialog
            .load($link.attr("href"))
            .dialog({
                modal: true,
                width: 520,
                height: 180,
                title: $link.attr("title")
            });
        $link.click(function() {
            $dialog.dialog("open");                                    
            return false;
        });           
        return false; 
    });
    $(document).bind('uploadDone', function(e) {
        // alert("dialogCloser triggered in dialog function");
        $dialog.dialog("close"); 
        $("#<?= $gridArr['uniq'] ?>-event-path-form-submit").trigger('click');   
    }); 

  });
});