jQuery 无法在 AJAX 加载的 DIV 中工作
在我的文档的 HEAD 中，我加载了 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>
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在加载 DOM 时，在 AJAX 调用完成之前，您的文档就绪函数就会加载。因此，它仅将
.live()调用应用于 AJAX 调用之前存在的元素。如果要将某些内容应用到 AJAX 调用加载的内容，请为 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.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.
live版本遇到什么问题？它仍然默默地失败吗？是否有可能
#yes点击事件方法中的AJAX请求失败？我已经采用了您的代码并对其进行了很大的简化在 jsfiddle 上，并且它似乎工作正常。使用
live没有问题，它应该修复通过 AJAX 插入的元素的事件处理程序。您是否尝试过在事件方法中抛出警报以查看它们是否被调用？
What is the problem you are getting with the
liveversion? Does it still fail silently?Is it possible that the AJAX request in the
#yesclick 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
liveand 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?