jQuery not working in AJAX loaded DIVs

Question

In the HEAD of my document I load jQuery.js and also the blockUI jQuery plugin.

In the PHP I then use regular AJAX to load other PHP content into DIVs. In the original PHP jQuery and blockUI plugin work just fine, but in any of the ajax-loaded divs jQuery and blockUI both do absolutely nothing. No console error, no warning - nothing.

I am a jQuery beginner and none of the other articles I found on this subject were able to put me over the edge of solving this, so I'm helping someone else can. In my code below you'll see I took some stabs at live()...

This is at the top of my PHP file that is loaded into the DIV

    <script type="text/javascript"> 
    $(document).ready(function() { 

        $('#crazy').live('click',function() { 
            $.blockUI({ message: $('#question'), css: { width: '275px' } }); 
        }); 

        $('#yes').live('click',function() { 
            // update the block message 
            $.blockUI({ message: "<h1>Remote call in progress...</h1>" }); 

            $.ajax({ 
                url: 'wait.php', 
                cache: false, 
                complete: function() { 
                    // unblock when remote call returns 
                    $.unblockUI(); 
                } 
            }); 
        }); 

        $('#no').live('click',function() { 
            $.unblockUI(); 
            return false; 
        }); 

    }); 
</script> 

Here is the HTML from that PHP file (loaded into the DIV):

<input id="crazy" type="submit" value="Show Dialog" /> 

<div id="question" style="display:none; cursor: default"> 
        <h1>Would you like to contine?.</h1> 
        <input type="button" id="yes" value="Yes" /> 
        <input type="button" id="no" value="No" /> 
</div> 

Answer 1

Your document ready function loads when the DOM is loaded, before your AJAX calls complete. Thus, it only applies the .live() calls to the elements which exist before the AJAX calls.

If you want to apply things to the contents loaded by the AJAX calls, specify a callback function for the AJAX that applies the proper stuff once the loading is complete.

Answer 2

What is the problem you are getting with the live version? Does it still fail silently?

Is it possible that the AJAX request in the #yes click event method is failing?

I've taken your code and simplified it a great deal on jsfiddle here, and it seems to be working fine. There isn't an issue with the usage of live and it should fix that event handler for elements being inserted via AJAX.

Have you tried just throwing alerts in the event methods to see if they get called at all?