jQuery .on（）事件不适用于动态添加的元素
我正在制作一个项目，当用户点击一个按钮时，动态插入一个带按钮的整个div，并在该div内部有一个按钮，当用户点击它时，它会执行其他操作，例如提醒某些内容。
问题是当我在动态添加的div中按下该按钮时，没有任何反应。 事件根本不会发生。
我试图在HTML中添加该div并重试，该事件有效。 所以我想这是因为div是动态添加的。
添加的div有一个类mainTaskWrapper ，按钮有一个类checkButton 。 该事件使用下面的script.js文件末尾的.on()附加。
这是我的代码：
helper_main_task.js 🙁这是添加div的对象，你不必阅读它，因为我认为这是关于动态添加div的所有内容，但我会把它放在你需要的情况下）
var MainUtil = { tasksArr : [], catArr : ["all"], add : function(){ var MTLabel = $("#mainTaskInput").val(), //task label MTCategory = $("#mainCatInput").val(), //task category MTPriority = $("#prioritySlider").slider("value"), //task priority MTContents = $('\ \ \ \ \ \ \ \ \ \ \ - Details
\ - Edit
\ - Delete
\
\ \ \ '); this.tasksArr.push(MTLabel); //setting label MTContents.find(".mainTaskLabel").text(MTLabel); //setting category if(MTCategory == ""){ MTCategory = "uncategorized"; } MTContents.attr('data-cat', MTCategory); if(this.catArr.indexOf(MTCategory) == -1){ this.catArr.push(MTCategory); $("#categories ul").append("" + MTCategory +" "); } $("#mainCatInput").autocomplete("option", "source",this.catArr); //setting priority marker color if(MTPriority == 2){ MTContents.find(".mainMarker").css("background-color", "red"); } else if(MTPriority == 1){ MTContents.find(".mainMarker").css("background-color", "black"); } else if(MTPriority == 0){ MTContents.find(".mainMarker").css("background-color", "blue"); } MTContents.hide(); $("#tasksWrapper").prepend(MTContents); MTContents.slideDown(100); $("#tasksWrapper").sortable({ axis: "y", scroll: "true", scrollSpeed : 10, scrollSensitivity: 10, handle: $(".holder") }); } };
script.js 🙁 .on（）函数位于底部的文件）
$(function(){ $("#addMain, #mainCatInput").on('click keypress', function(evt){ if(evt.type == "click" || evt.type =="keypress"){ if((evt.type =="click" && evt.target.id == "addMain") || (evt.which == 13 && evt.target.id=="mainCatInput")){ MainUtil.add(); } } }); //Here's the event i'm talking about : $("div.mainTaskWrapper").on('click', '.checkButton' , function(){ alert("test text"); }); });
它看起来不像div.mainTaskWrapper 。
从文档 （是的，它实际上是粗体）：
事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用
.on()。 要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。[…]
通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。
您可能希望将其绑定到#tasksWrapper ：
$("#tasksWrapper").on('click', '.checkButton' , function(){ alert("test text"); });
您需要使用on （作为参数）指定选择器，使其行为类似于旧delegate方法。 如果不这样做，事件将只链接到当前与div.mainTaskWrapper匹配的元素（它们尚不存在）。 您需要在添加新元素后重新分配事件，或者将事件添加到已存在的元素，如#tasksWrapper或文档本身。
请参阅此页面上的“直接和委派活动”。
我知道这是一个老post，但对于遇到的任何人都可能有用…
你可以尝试：
jQuery('body')on.('DOMNodeInserted', '#yourdynamicallyaddeddiv', function () { //Your button click event });
这是一个简单的例子 – https://jsfiddle.net/8b0e2auu/