动态增加的元素无事件处理 -- Jquery解决方案.$("button").$("body").$("div").$(

文章目录

背景：按button新增加的DIv元素并没有点击div会变背景色的事件

<head>
     <style>
          div {
               background:red;
               width: 40px;
               height: 40px;
               margin: 0 auto;
               border: 1px solid black;
               margin-top: 50px;
          }
          .green {
               background: green;
          }
     </style>
</head>

<body>
     <button>添加一个新的div元素</button>
     <div></div>
</body>

<script>
     $("button").click(function() {
          $("body").append("<div></div>");
     })
     $("div").click(function() {
         $(this).toggleClass("green");
     })
</script>

效果图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bBnmi8nC-1572885016368)(en-resource://database/8455:1)]

解决方案1

思路： 为添加的那个元素添加事件

缺点： 代码冗余

修改$(“button”).click()事件处理

$("button").click(function() {
   
   var a = $("<div>");
    a.click( function() {      
        $(this).toggleClass("green");
    })
    $("body").append( a );

})

$("div").click(function() {
    $(this).toggleClass("green");
}

解决方案2

思路： 使用$(document).filter("") 进行解决

$(document).filter("div").click(function() {
    $(this).toggleClass("green");
})

解决方案3

思路： 使用on事件绑定

$(document).on("click", "div", function() {
    $(this).toggleClass("green");
})