append - .on 的点击事件不会触发附加元素

Question

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

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

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

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

提前告诉你

Answer 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));
   }