HTML中关于动态创建的标签无法绑定js事件的解决方法

最新推荐文章于 2023-10-29 10:11:12 发布

赌上青春

最新推荐文章于 2023-10-29 10:11:12 发布

阅读量5.4k

点赞数 3

分类专栏： JavaScript Html 文章标签：无法绑定事件动态创建 on jquery html

本文链接：https://blog.csdn.net/qq_31788297/article/details/59695700

版权

Html 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

0 篇文章 0 订阅

订阅专栏

小伙伴们在前端页面的时候，是不是会经常遇到用JavaScript动态创建出来的Button按钮或其他标签无法使用点击事件的问题。如下代码，使用jquery在body中动态创建一个class为demo的Button按钮，当点击这个按钮时无法触发点击事件。

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

<body>

</body>

这里给出一个jquery的解决方案：

将以上代码中的 $(“.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>

**注意：网上有一种方法是这样的
将 $(“.demo”).click(function(){………}); 修改为 $(“.demo”).on(“click”,function(){………});
但是我自己用这种方法试了没有成功。也许是我有些地方操作上有问题。如果你用这种方式测试可以使用的话还是优先使用这种方式吧。我个人也觉得在能用的情况这种方式还是比我的方式简单的。
如果有什么不理解的问题可以QQ联系我。
如有写的不好的地方欢迎大家指出。谢谢。**