绑定并遍历通过Ajax交付的内容

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元素的位置。

更新

我已经解决了这个问题。它源于通过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();
        }
    });
});

Answer 1

非常适合ajaxStop()事件。

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

http://jsfiddle.net/uyMJZ/

Answer 2

开始阅读关于现已弃用的live()方法的文档，并学习如何使用on()来实现它。

基本上，对于加载了AJAX的DOM元素，您需要使用某种委托。最简单（但效率最低）的方法是使用on():绑定到document

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