js动态插入的元素点击无效

当点击按钮1时为元素b动态添加元素discounted，并对元素discounted进行点击事件

$(".btn1").click(function(){
      $(".b").append("<div class='discounted'>");

 });　

 $(".discounted").click(function(){

    alert("0000")；

}）

以前以为动态插入的元素直接用on便可以进行操作，但今天试了很多次都没成功

看到网上说当动态生成元素的同时也动态生成事件过程，而不是先生成一个子虚乌有的事件来等着元素对号入座。

觉得很有道理

因为当程序第一次运行到

$(".discounted").on("click",function(){
        alert("1111");
})时找不到对象，程序就会判定为出错，那个这个事件代码就无效了。

修改代码为

$(".btn1").click(function(){
    $(".b").append("<div class='discounted'>");
   $(".discounted").click(function(){
    $(".discounted").unbind("click"); //因为需求要求点击btn1后才能使元素discounted有点击事件，所以每次点击后都需要移除click绑定事件
    alert("0000")；
    
    
})
})

　　就ok了

 

转载于:https://www.cnblogs.com/Anne3/p/6862763.html