zhoujunfei1990 2021-03-18 16:20 采纳率: 50%
浏览 94
已采纳

js异步的问题,callback函数触发次数的问题

<body>
<button id="new">new</button>

<h3>testH3</h3>


<script>
    $(function () {
        $('h3').click(function () {
                    alert($(this).text());
                });
        
        $('#new').click(function () {
            $.getJSON("/app3/testajax/", null, function (result) {
                let $body = $('h3').parent();
                let $new = $('<h3></h3>');
                $new.text('new added');
                $body.append($new);
             

            });
        });
    });
</script>
<body>

有一个h3标签,在点击的时候可以弹出h3的内容;

有一个button,每按一次会新增一个h3标签;

但是问题是点击button新增的h3标签不会触发click事件,只有原有点击原有的h3会触发click事件。

为了解决这个问题我把代码改成了这样

<script>
    $(function () {
        $('#new').click(function () {
            $.getJSON("/app3/testajax/", null, function (result) {
                let $body = $('h3').parent();
                let $new = $('<h3></h3>');
                $new.text('new added');
                $body.append($new);
                $('h3').click(function () {
                    alert($(this).text());
                })

            });
        });
    });
</script>

虽然开始的问题解决了,但是出现了新问题,每多新增一个h3,点击h3的时候会多次触发click事件,请大神帮忙这个怎么解决

  • 写回答

3条回答 默认 最新

  • 禅思院 前端领域优质创作者 2021-03-18 16:42
    关注
          $(function () {
                    $('h3').click(function () {
                        alert($(this).text());
                    })
              $('#new').click(function () {
                  $.getJSON("/app3/testajax/", null, function (result) {
                      let $body = $('h3').parent();
                      let $new = $('<h3></h3>');
                      $new.text('new added');
                      $new.click(function () {
                        alert($(this).text());
                      })
                      $body.append($new);
       
                  });
              });
          });
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?