在前端页面的时候,会经常遇到用JavaScript动态创建出来的Button按钮或其他标签无法使用点击事件的问题。如下代码,使用jquery在body中动态创建一个class为demo的Button按钮,当点击这个按钮时无法触发点击事件。
<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)匹配,就触发事件,否则不触发。
.on()方法的 [.selector]用法详情见:https://www.runoob.com/jquery/event-on.html