javascript - jquery 事件绑定(bind)的奇怪行为

Question

这里是 jquery 大师的一个:

这有效:

$(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; 
        });

    });
});

这不会:

$(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; 
        });

    });
});

唯一的区别是警报声明。基本上，我在这里所做的是将一堆单击事件处理程序附加到图像，这会在对话框中显示 ajax 上传表单。上传表单将图像转储到 iframe。然后，iframe 会触发绑定(bind)到 $(document) 的 uploadDone 处理程序，并触发另一个点击事件。

唯一的区别是警报语句的存在。我取出该行，对话框无法关闭。

请告诉我我只是错过了一个分号或一些愚蠢的东西......否则我正在考虑使用delay()。

谢谢。

<小时/>

解决方案:

经过一晚上的闲逛，我终于想到了这一点。我无法肯定地确定警报语句发生了什么，或者如何管理异步执行，但这解决了这个问题。

var $dialog = $("<div></div>");
$(function (){    
    $("#event_22 .gallery-add").each(function() {
        var $link = $(this).one("click", function() {
            $dialog
                .load($link.attr("href"))
                .dialog({
                    modal: true,
                    width: 520,
                    height: 180,
                    title: $link.attr("title")
                }).bind('uploadDone', function() {
                 // alert("uploadDone triggered in dialog function");
                 $("#myForm-submit").trigger('click');
            });
            $link.click(function() {
                $dialog.dialog("open");                                    
                return false;
            });
            return false; 
        });       
    });
});

在成功的 iframe 中，

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

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

• 在全局范围内的函数外部声明了 $dialog
• 在创建 $link.click() 之前将 uploadDone 事件监听器绑定(bind)到 $dialog
• 将 id="22"更改为 id="event_22"，因为在 html < 5 中，ID 必须以字母字符开头。

我不确定要接受谁的答案，但我当然感谢您的所有帮助。

Answer 1

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