Strange behavior with jquery event binding
<p>Here's one for the jquery masters:</p>

<p>This works:</p>

<pre><code>$(function (){
    $("#&lt;?= $gridArr['event_id'] ?&gt; .gallery-add").each(function() {
        var $dialog = $("&lt;div&gt;&lt;/div&gt;");
        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"); 
                $("#&lt;?= $gridArr['uniq'] ?&gt;-event-path-form-submit").trigger('click');   
            });                         
            return false; 
        });

    });
});
</code></pre>

<p>This doesn't:</p>

<pre><code>$(function (){
    $("#&lt;?= $gridArr['event_id'] ?&gt; .gallery-add").each(function() {
        var $dialog = $("&lt;div&gt;&lt;/div&gt;");
        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"); 
                $("#&lt;?= $gridArr['uniq'] ?&gt;-event-path-form-submit").trigger('click');   
            });                         
            return false; 
        });

    });
});
</code></pre>

<p>The only difference is the alert statement.  Basically what I'm doing here is attaching a bunch of click event handlers to images, which bring up ajax upload forms in dialogs. The upload form dumps the images to an iframe. The iframe then triggers an the uploadDone handler which is bound to $(document), and that triggers another click event.</p>

<p>The only difference is the presence of the alert statement.  I take that line out, and the dialog fails to close.</p>

<p>Please tell me I just missed a semicolon or something stupid.... otherwise I was thinking of using delay(). </p>

<p>Thanks.   </p>

<hr>

<p>Solution:</p>

<p>I finally arrived at this after an evening of goofing. I wasn't able to positively determine what was going on with the alert statement, or how to manage the asynchronous execution, but this worked around it.</p>

<pre><code>var $dialog = $("&lt;div&gt;&lt;/div&gt;");
$(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; 
        });       
    });
});
</code></pre>

<p>In the success iframe, </p>

<pre><code>parent.$dialog.dialog("close");
parent.$dialog.trigger( 'uploadDone' );
</code></pre>

<p>Thanks a lot everyone for your help. Here are the changes I made to get this working:</p>

<ul>
<li>declared $dialog outside the function in the global scope</li>
<li>bound the uploadDone event listener to $dialog prior to creating $link.click()</li>
<li>changed id="22" to id="event_22" cause in html &lt; 5, IDs have to start with alpha chars.</li>
</ul>

<p>I'm not sure who's answer to accept, but I certainly appreciate all of your help.</p>
