jQuery在AJAX加载的DIV中不起作用 [英] jQuery not working in AJAX loaded DIVs

问题描述

在文档的头中，我加载jQuery.js以及blockUI jQuery插件.

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

然后在PHP中，我使用常规AJAX将其他PHP内容加载到DIV中.在原始的PHP中，jQuery和blockUI插件可以正常工作，但是在任何由ajax加载的div中，jQuery和blockUI都绝对不起作用.没有控制台错误，没有警告-什么都没有.

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.

我是jQuery的初学者，而我在该主题上发现的其他文章都没有使我处于解决此问题的边缘，因此，我正在帮助其他人.在下面的代码中，您会看到我在live()上刺了一些东西……

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()...

这是我的PHP文件的顶部，该文件已加载到DIV中

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> 

以下是该PHP文件中的HTML(已加载到DIV中):

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> 

推荐答案

在您的AJAX调用完成之前，当DOM加载时，文档就绪函数即会加载.因此，它仅将.live()调用应用于AJAX调用之前存在的元素.

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.

如果要将内容应用于AJAX调用加载的内容，请为AJAX指定一个回调函数，该函数在加载完成后将应用适当的内容.

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.

这篇关于jQuery在AJAX加载的DIV中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！