Question

我不确定如何绑定到通过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元素的位置。

更新

我已经解决了这个问题。它源于通过Ajax通过fadeIn方法中的回调函数加载内容。显然jQuery不会遍历尚未完全可见的DOM元素。我只是将方法从fadeIn更改为show，并且在使用ajaxStop绑定到on()事件时效果很好。以下是任何想要了解的人的更新代码：

$(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();
        }
    });
});

Answer 1

开始阅读现已弃用的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
});

Answer 2

与ajaxStop()事件完美合作。

这是一个工作示例（使用console.log()，因此请使用不会阻塞它们的浏览器）：

http://jsfiddle.net/uyMJZ/

绑定并遍历通过Ajax传递的内容

2 个答案: