HTML中关于动态建立的标签没法绑定js事件的解决方法：.on()方法的 [.selector]

时间 2019-12-09

标签 html 关于动态建立标签没法绑定事件解决方法 selector 栏目 HTML 繁體版

原文原文链接

在前端页面的时候，会常常遇到用JavaScript动态建立出来的Button按钮或其余标签没法使用点击事件的问题。以下代码，使用jquery在body中动态建立一个class为demo的Button按钮，当点击这个按钮时没法触发点击事件。html

<script>
$(function(){
    $("body").html("<button class='demo'>按钮</button>");
    $(".demo").click(function(){
        alert("弹窗");
    });
});
</script>
<body>
</body>

将以上代码中的 $(“.demo”).click(function(){………}); 修改成 $(document).on(“click”,”.demo”,function(){………})便可：前端

<script>
$(function(){
    $("body").html("<button class='demo'>按钮</button>");
    $(document).on("click",".demo",function(){
        alert("弹窗");
    });
});
</script>

<body>

</body>

此时事件冒泡到document对象上，当检测事件的target，若是与传入的选择符（这里是selector）匹配，就触发事件，不然不触发。jquery

.on()方法的 [.selector]用法详情见：https://www.runoob.com/jquery/event-on.htmlspa