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

我有一段代码，它向另一个脚本运行ajax请求，并在每次单击“更多”按钮时追加新的

s

我正在使用以下代码：

$(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'）。在（“单击”，函数（）上）{
var ID=$（this.attr（“ID”）；
如果（ID）{
$（“#更多”+ID）.html（“”）；
$.ajax({
类型：“POST”，
url:“/cs\u directory/helpers/jpost\u load\u post.php”，
数据：“lastmsg=“+ID，
cache:false，
成功：函数（html）{
$（“ul#现有#U活动”）。附加（html）；
$（“#更多”+ID）.remove（）；//删除旧的更多按钮
}
});
}否则{
$（“.morebox”）.html（'End'）；//没有结果
}
返回false；
});
});

我将添加#more按钮和我的url返回

---

但是，由于它是在加载文档后追加的。我的功能似乎不再适用了。。如何更改它，使“更多”按钮在每次单击时都会递归运行？

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

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

委派事件的优点是，它们可以从中处理事件 以后添加到文档中的子元素。通过 选择一个元素，该元素保证在 已附加委派事件处理程序，您可以使用委派事件 避免频繁附加和删除事件处理程序

---

检查文档，他们正在谈论使用.on（）或.delegate（）进行delegationSee事件委派，或者您也可以使用.clone（true，true）@A.Wolff来克隆现有元素不，我们今天没有足够的事件委派问题：）