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.