带有附加元素的jQuery $.each，需要在初始循环中推送附加元素

Question

正如您在下面的代码摘录中看到的，我正在运行一个循环来获取所有li项的I。问题是li元素被附加在ajax回调之后。显然，新附加的元素不包括在我的初始循环中，因此我拥有的任何点击、焦点事件都不起作用。在我的循环中“刷新”项目的最好方法是什么？我曾尝试将循环封装在一个函数中，并在ajax回调中调用它，但不起作用。

提前感谢:)

<ul id="post-list">
    <li id="post-1"></li>
    <li id="post-2"></li>
    <li id="post-3"></li>
    <li id="post-4"></li>
    <li id="post-5"></li>
</ul>

var $postlist = $("#post-list > li");

$postlist.each(function(idx, li) {

    var list = $(li);
    var $postID = list.attr('id').replace('post-','');

    console.log($postID);
});

Answer 1

在$postlist中存储jQuery数组后，对DOM的更新不会更改该数组。相反，应该在每次运行代码时收集<li>元素：

var $postlist = $("#post-list");

$postlist.children("li").each(function() {

    var list = $(this);
    var $postID = list.attr('id').replace('post-','');

    console.log($postID);
});

this引用each循环中的DOM元素本身，因此如果不需要元素的数组索引，可以省略函数参数。

若要向尚不存在的元素添加事件，请使用jQuery on()方法在父对象上设置事件侦听器：

$postlist.on("click","li",function(){

    console.log('clicked: ' + $(this).attr('id'));

});