使用.on的Click事件不会触发附加元素

Question

我的问题是,即使我使用.on,添加了类的添加div的click事件也不会触发.这是我的页面脚本.

$(".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));
   }