6
709<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
$('.add').click(function(event) {
$('body').append('<p class="txt">aaaaaaaaaaaa</p>');
$('.txt').click(function(event) {
console.log("a");
});
});
})
</script>
</head>
<body>
<a href="#" class="add">添加一个</a>
<a href="#" class="delete">删除一个</a>
</body>
</html>
请问，当我点击4次<a href="#" class="add">添加一个</a>的时候，页面出现4条aaaaaaaaaaaa，当我点击第一条aaaaaaaaaaaa，打印4次a,点击第二条aaaaaaaaaaaa，打印3次a。。。。这是为什么，事件冒泡吗？？我阻止了也好像没有效果。。我要怎么做才能是点击每一条时只打印一次a。。。。求助，谢谢
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
动态元素的事件绑定请使用事件委托
很久之前我也遇到类似的问题， 解决方法 http://www.lao8.org/article_1323/jquery_click
第一次：
<p class="txt">aaaaaaaaaaaa</p>（它有一次点击事件）第二次：
<p class="txt">aaaaaaaaaaaa</p>（它有二次点击事件）<p class="txt">aaaaaaaaaaaa</p>（它有一次点击事件）第三次：
<p class="txt">aaaaaaaaaaaa</p>（它有三次点击事件）<p class="txt">aaaaaaaaaaaa</p>（它有二次点击事件）<p class="txt">aaaaaaaaaaaa</p>（它有一次点击事件）第四次：
<p class="txt">aaaaaaaaaaaa</p>（它有四次点击事件）<p class="txt">aaaaaaaaaaaa</p>（它有三次点击事件）<p class="txt">aaaaaaaaaaaa</p>（它有二次点击事件）<p class="txt">aaaaaaaaaaaa</p>（它有一次点击事件）想要阻止这种事发生：应该每添加一次
p的时候：$('.txt').unbind('click');修改代码如下：
感觉楼上的回答也不是一个很好的方法。理解了$('.txt')其实就很简单了。。
出现这种情况是因为你重复的给已有的元素赋予点击事件。
当你追加第一个p元素的时候，你立即给.txt的p元素赋予了点击事件这个时候。
当你追加第二个p元素的时候，你又立即给.txt的元素赋予了点击事件，而你第一个.txt的p元素在我们第二句话的时候已经赋予了点击事件，这个时候你是第二次赋予，那么在你点击第一个追加的元素的时候，就会产生两次点击效果。后面的一次类推。
同意楼上的意见，我再稍微补充一下
$('.click').click(function(){ console.log('a'); }); $('.click').click(function(){ console.log('a'); }); $('.click').click(function(){ console.log('a'); });如果是这样静态的加上这些代码，点一下就会出现3个a,这样的话就好理解楼上的说法了