Question

我有一段代码，它会向另一个脚本运行ajax请求，并在每次点击更多按钮时附加新的<li>。

我正在使用以下代码：

$(function(){
$('.more').on("click",function(){
    var ID = $(this).attr("id");
    if(ID){
        $("#more"+ID).html('<img src="moreajax.gif" />');

        $.ajax({
            type: "POST",
            url: "/cs_directory/helpers/jpost_load_post.php",
            data: "lastmsg="+ ID, 
            cache: false,
            success: function(html){
                $("ul#existing_campaign").append(html);
                $("#more"+ID).remove(); // removing old more button

            }
        });
    }else{
        $(".morebox").html('The End');// no results
    }

    return false;
});
});

我正在将#more按钮与我的网址的回复一起添加。

但是，因为它在文档加载后附加了。我的功能似乎不再适用了..如何更改它以便每次点击它时更多的按钮会递归动作？

Answer 1

您需要将事件委托给动态添加的元素的父级

$(document).on("click",'.more', function(){
      //your code
});

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序reference。

在动态添加的元素上应用.on

1 个答案: