jquery按钮第一次工作正常，但第二次不工作

Question

我创建了一个非常简单的 index.html 文件，并在其中包含了一些 jquery 脚本。你可以在下面看到：

    <script>
        $(document).ready(function(){
        var $tweets = $('.tweets');
        var current_position = -1;
        function getTweets(){
          var index = streams.home.length - 1;
          var cp = index;
          while(index >= current_position + 1){
            var tweet = streams.home[index];
            $tweets.append('<div class="twe"><span class="name" style="color:blue">' + '@' + tweet.user + ': ' + ' </span><span class="message">' + tweet.message + tweet.created_at + '</span></div>');
            index--;
          }
          current_position = cp;
        }
        getTweets();
        $('button').click(function(){
          getTweets();
        });
        $('.name').click(function(){
          $tweets.prepend('<div>' + 'objname' + streams.home.length + '</div>');          
        });

      });
</script>

有一个按钮用于更新所有推文并动态地将它们放入 class="tweets" 部分。而且这个按钮不管我按多少次都能正常工作。

然后我将点击事件添加到所有类名为“name”的人，一旦我点击它，它就会在我的前面添加“objname”+streams.home.length 部分 class="tweets" 部分。问题是第一次，我点击 $('.name') 它工作正常，但后来我通过 $('button') 点击事件添加了更多项目。似乎新创建的 $('.name') 项目不可点击，这意味着它们不会在我的前面生成 'objname' + streams.home.length 带有 class="tweets" 部分的部分。我在这里真的很困惑，不知道为什么。

Answer 1

尝试关注

$("body").on("click",".name",function(){
          $tweets.prepend('<div>' + 'objname' + streams.home.length + '</div>');          
        });

当您的元素在页面上添加运行时，需要在“on”的帮助下单独处理它，它会在创建事件时自动绑定事件。

check reference