动态元素的事件绑定请使用事件委托

javascript$('body')
    .on('click', '.add', function(){
        $('body').append('<p class="txt">aaaaaaaaaaaa</p>');
    })
    .on('click', '.txt', function(){
        console.log('a');
    });

很久之前我也遇到类似的问题， 解决方法 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');

修改代码如下：

$('.add').click(function(event) {
    $('body').append('<p class="txt">aaaaaaaaaaaa</p>');
         $('.txt').unbind('click').click(function(event) {
        console.log("a");
    });
});

感觉楼上的回答也不是一个很好的方法。理解了$('.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,这样的话就好理解楼上的说法了