jQuery在通过AJAX加载的DIV中无法正常工作

Question

在我的文档头部，我加载了jQuery.js和blockUI jQuery插件。

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

我是一个jQuery初学者，我找到的其他文章都不能帮我解决这个问题，所以我希望能帮助其他人。在下面的代码中，您会看到我尝试了一些live()...

这是加载到DIV中的PHP文件的顶部。

    <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中）：

<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> 

- themerlinproject

Answer 1

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

如果您想要将操作应用到由AJAX调用加载的内容，则需要为AJAX指定回调函数，以便在加载完成后应用适当的内容。

- Amber

---

嗨，Amber，感谢您的回复。我对jQuery非常陌生，这句话“为AJAX指定一个回调函数，一旦加载完成，应用适当的内容”让我感到非常困惑。那个回调函数会是什么样子，我应该把它放在哪里？ - themerlinproject

查看设置参数中的success和/或complete字段。 请注意，这是一条命令，告诉读者在jQuery.ajax()函数中寻找哪些字段。 - Amber

live 事件实际上解决了通过 AJAX 添加到页面的元素的问题 - http://api.jquery.com/live/ - partkyle

谢谢，这让我朝着正确的方向寻找。而且这是最简单的事情...我的JavaScript代码在包含PHP文件的顶部加载，而不是与父文件头部的其他JavaScript一起加载。现在我已经改变了这个，现在使用live()函数非常好用。 - themerlinproject

Answer 2

你在使用“live”版本时遇到了什么问题？它是否仍然默默失败？

可能是“#yes”单击事件方法中的AJAX请求失败了吗？

我已经采取了你的代码并大大简化了它，在这里jsfiddle，它似乎工作正常。使用“live”没有问题，它应该修复通过AJAX插入元素的事件处理程序。

你尝试过只在事件方法中加入警报来查看它们是否被调用了吗？

- partkyle