绑定到Ajax并遍历通过Ajax交付的内容
绑定到Ajax并遍历通过Ajax交付的内容
提问于 2012-03-27 06:24:05
我不知道如何绑定到通过Ajax加载的内容，并遍历它以查看是否添加了任何新元素。下面是我当前的代码(jQuery)：
jQuery(document).ready(function($) {
$(document).find('.my-selector').each(function() {
if ( $(this).is(':checked') ) {
$(this).parent().parent().next().show();
} else {
$(this).parent().parent().next().hide();
}
});
});我知道这不会绑定到通过Ajax加载的未来内容，但我不知道如何绑定遍历。我尝试过使用$(document).on('ajaxStop')，然后遍历，但这似乎对我不起作用。我不能使用.on('click')或其他任何类似的事件，因为新的内容还没有加载。
有什么办法吗？上面的代码对于页面上已经存在的内容非常有用，所以我只需要修改它，以便将它绑定到未来的.my-selector元素。
更新
我已经解决了这个问题。它源于通过fadeIn方法中的回调函数通过Ajax加载内容。显然，jQuery不会遍历尚未完全可见的DOM元素。我只是将方法从fadeIn更改为show，当使用on()绑定到ajaxStop事件时，它工作得很好。以下是任何人想知道的更新代码：
$(document).on('ajaxStop', function() {
$(this).find('.my-selector').each(function() {
if ( $(this).is(':checked') ) {
$(this).parent().parent().next().show();
} else {
$(this).parent().parent().next().hide();
}
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2012-03-27 07:14:01
Stack Overflow用户
发布于 2012-03-27 06:29:06
开始阅读现在不推荐的live()方法上的文档，并学习如何使用on()来实现它。
基本上，对于加载AJAX的DOM元素，您需要使用某种委托。最简单(但效率最低)的方法是使用document绑定到on()。
$(document).on('click','.my-selector', function(e) {
// do stuff
});一个更好的方法是委托给最近的DOM容器。例如，如果要向列表中添加元素，则可以将处理程序委托给列表本身：
$('ul#news').on('click', 'li', function(e) {
// stuff for whenever a li is clicked, old or new
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9891498
复制相关文章
相似问题
腾讯云开发者
