实例问题见下
<html>
<div id="spanArray">
<span class="spanOne">我是原有标签,点击我控制台输出信息</span>
</div>
<script>
//新生成的元素点击无效果
$(".spanOne").click(function() {
console.log("我是一个标签");
$("#spanArray").append('<br><span class="spanOne">我是新生成的标签,点击我控制台没有效果</span><br>')
})
</script>
解决方法一: 推荐使用
$(document).on('click', function() {
console.log("我是一个标签");
$("#spanArray").append('<br><span class="spanOne">我是新生成的标签,点击我此时有效果</span><br>')
})
// $("#spanArray") 为新增加的dom节点所在的父元素, '.spanOne'是添加节点的class属性
或者
$("#spanArray").on('click', '.spanOne', function() {
console.log("我是一个标签");
$("#spanArray").append('<br><span class="spanOne">我是新生成的标签,点击我此时有效果</span><br>')
})
//以上的两种方式都可以,都是利用了事件的捕获
解决方法二 : 不推荐,低版本才可以使用。大部分版本无效果
$(".spanOne").live('click', function() {
console.log("我是一个标签");
$("#spanArray").append('<br><span class="spanOne">我是新生成的标签,点击我此时有效果</span><br>')
})
<script>
$("").click(fun(){}) 和 $(document).on(‘click’,’’, fun(){}) 的区别以及
click() 和onclick() 的区别请参考下面的文章
https://blog.csdn.net/zhang19903848257/article/details/104016894