.on 的单击事件不会在附加元素上触发 [重复]

【问题标题】：Click event with .on is not firing over appended elements [duplicate].on 的单击事件不会在附加元素上触发 [重复]
【发布时间】：2013-09-22 10:26:54
【问题描述】：

我的问题是，即使我使用 .on，在添加了类的添加 div 上的点击事件也不会触发。这是我的页面脚本。

$(".added").on("click", function () { alert("halo") });

$("#nextAdress").on("click",function (event) {
    event.preventDefault();
    $("#trainerRegistrationFields").append('<div class="added">adsa</div>');
}

你能帮我，这样点击事件也会在添加了类的动态添加元素上触发吗？

提前告诉你

【问题讨论】：

关于这个问题的变体是关于 jquery on SO 的最常见问题之一。我用谷歌搜索了你的问题标题，前 5 个回答都是正确答案的 stackoverflow 问题。

标签： append jquery

【解决方案1】：

您可以使用on 的事件委托语法来动态添加元素。

$("#trainerRegistrationFields").on("click",".added", function (){ 
    alert("halo") ;
});

在您的代码中，您仅将处理程序绑定到事件绑定期间存在于 DOM 中的元素。你也可以这样做：

或在追加项目时在此处添加处理程序。

   function handleClick(){
      alert("halo");
   }

   $(".added").on("click", handleClick); //for the already existing elements

   $("#nextAdress").on("click",function (event) {
       event.preventDefault();
       $("#trainerRegistrationFields").append($('<div class="added">adsa</div>').on('click', handleClick));
   }

【讨论】：

很好奇为什么有人反对这个。这是正确的答案。
反对者解释...
收回你的+2，至少我从不报仇。