问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jquery动态添加元素

头像
muzi1102
    51675777
    <!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。。。。求助，谢谢

    jqueryjavascript
    阅读 4.9k
    6 个回答
    得票最新
    头像
    solar
      2.9k2511
      ✓ 已被采纳

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

      javascript$('body')
    .on('click', '.add', function(){
        $('body').append('<p class="txt">aaaaaaaaaaaa</p>');
    })
    .on('click', '.txt', function(){
        console.log('a');
    });
      头像
      老修_走失的镜头盖
        2
        新手上路，请多包涵
        头像
        竹林子
          73657

          第一次：
          <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");
    });
});
          头像
          小小书童
            4113

            感觉楼上的回答也不是一个很好的方法。理解了$('.txt')其实就很简单了。。

            头像
            诚实可爱小肿君
              65483339

              出现这种情况是因为你重复的给已有的元素赋予点击事件。
              当你追加第一个p元素的时候，你立即给.txt的p元素赋予了点击事件这个时候。
              当你追加第二个p元素的时候，你又立即给.txt的元素赋予了点击事件，而你第一个.txt的p元素在我们第二句话的时候已经赋予了点击事件，这个时候你是第二次赋予，那么在你点击第一个追加的元素的时候，就会产生两次点击效果。后面的一次类推。

              头像
              zeroone0010
                298138

                同意楼上的意见，我再稍微补充一下$('.click').click(function(){ console.log('a'); }); $('.click').click(function(){ console.log('a'); }); $('.click').click(function(){ console.log('a'); });
                如果是这样静态的加上这些代码，点一下就会出现3个a,这样的话就好理解楼上的说法了

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题