2017-01-13 5 views
0

非常に単純なindex.htmlファイルを作成しましたが、その中にjqueryスクリプトが含まれていました。あなたは以下を参照することができます:動的にアップデートすべてのつぶやきを使用し、一つのボタンがあるjqueryボタンは初めて正常に動作しますが、2回目は動作しません。

<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> 

クラス=「つぶやき」の部分でのセクションでそれらを置きます。そして、このボタンは何度も押しても問題ありません。

次に、クラス名が 'name'のすべての人にclickイベントを追加してクリックすると、 'objname' + streams.home.lengthが私の セクションclass = "tweets"の部分の前に追加されます。問題は初めてですが、$( '。name')をクリックしても問題ありませんが、後で$( 'button')clickイベントでさらに項目を追加した後です。新しく作成された$( '。name')アイテムはクリック可能ではないようです。つまり、「objname」+ streams.home.lengthをクラス「=つぶやき」部分の セクションの前に生成しないことを意味します。私は本当にここで混乱していて、理由を知らない。あなたの要素は、ページ上の追加のランタイムを取得したよう

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

を以下

+2

の可能性のある重複した[動的に作成された要素を上の結合イベント?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) –

答えて

0

試して、それはイベントが作成されるときに自動的にイベントをバインド「オン」の助けを借りて、別々に世話をする必要がありました。

check reference

+0

はそんなにありがとう。それは動作し、動的バインディングの問題が原因であることはわかりません。 – luckydooodle

関連する問題