Question

正如您在下面的代码摘录中所看到的，我正在运行一个循环来获取所有li项的ID。问题是在ajax回调之后附加了li元素。显然，新添加的元素不包含在我的初始循环中，因此任何点击，焦点事件我都不起作用。在我的循环中“刷新”项目的最佳方法是什么？我已经尝试将循环封装在一个函数中并在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'));

});

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

1 个答案: