divに新しい要素を追加すると、jQueryは新しい要素の作業を停止します

Question

問題は分かりやすいと思いますが、ここでは何が起きているのでしょうか。

  <div class="post-basic" id="post-{unique id}"> 
      <div class="title-card"> 
       <div class="avatar-sec"> 
       <img src="{link to avatar}" class="avatar" ref="Avatar" /> 
       </div> 
       <div class="name-card"> 
       <span class="display-name">{display name}</span> 
       <span class="handle">@{handle}</span> 
       </div> 
       <div class="action"> 
       <div class="follow-button {filled with either: follow or followed}" id="{unique id}"> 
        {filled with either: follow or followed} 
       </div> 
       </div> 
      </div> 
      </div> 

とあなたはdiv.followボタンをクリックしたとき、それはに変更しますように私はjQueryが設定されている：私はこのように設定されているページ全体で繰り返される「ポスト」要素を持っています'フォローして' PHPページにPOSTを送信します。そのように設定します。

$('.follow-button').click(
    function() { 
    var user_id = $(this).attr('id'); 
    var follow_url = "./func/follow.func.php"; 
    if ($(this).hasClass("follow")) { 
     $(this).removeClass('follow').addClass('followed').text('followed'); 
     $.ajax({ 
      type: "POST", 
      url: follow_url, 
      data: {id:user_id}, // serializes the form's elements. 
      success: function(data) 
      { 
       $('#'+user_id).parents('.post-basic').remove(); 
       $.ajax({ 
        type: "POST", 
        url: "./func/gather.basic.func.php", 
        data: {}, // serializes the form's elements. 
        success: function(data) 
        { 
         var response = $.parseJSON(data); 
         $('.posts').append('<div class="post-basic" id="post-'+ response[0].streamID_gather +'"><div class="title-card"><div class="avatar-sec"><img src="'+ response[0].avatarSrc +'" class="avatar" ref="Avatar"/></div><div class="name-card"><span class="display-name">'+ response[0].display_name +'</span><span class="handle">@'+ response[0].name +' '+ response[0].followsYou +'</span></div><div class="action"><div class="follow-button '+ response[0].follow +'"id="'+ response[0].streamID_gather +'">'+ response[0].follow +'</div></div></div></div>'); 
         } 
        }); 
       } 
      }); 
     } 
    } 
); 

私はちょうどので、私はこれと同じことを行うが、本質的に他の方法の多くがあります確信しているjQueryを使って始めるのです：div.follow-buttonがクリックされた場合、続くへdiv変更内のテキストをclassはfollowedに変更されています。次に、POSTリクエストを"./func/follow.func.php";に送信します。要求が正常に処理されると、"./func/gather.func.basic.php";に別の要求が送信され、json配列が返されます。配列を使用すると、jQueryはコンテナdiv.postsに新しいpostという応答データを追加します。それは何か。上記のすべてがうまくいっています。しかし、私がしようとすると、新しいdiv.postとフォローボタンをクリックしても動作しません。 jQueryが既にロードされているか、それとも何ですか？

Answer 1

OPのコメントで述べたように、これはイベントリスナーがjavascriptでどのように動作するかに関する問題です。

あなたは：

$('.follow-button').click(handlerFunction); 

それはDOMでONLY電流整合項目にイベントをバインドされています。

1）は、例えばDOM ...に新しいコンテンツを挿入した後にイベントハンドラを更新します。あなたが同じイベントハンドラに応答する&削除する要素を追加している場合は

あなたは2つのオプションを持っていますあなたは）はるかに優れたソリューション

2再び

OR ...を$(selector).on('click', handlerFunction)を呼び出してDOMに変更されていない親要素 ...などにイベントを添付する必要がありますHTMLの体にイベントリスナーを添付ますが、

はまたあなたはおそらく入れたい...項目がセレクタにマッチした「クリック」場合にのみ、イベントを発生させます

$('body').on('click', '.follow-button', handlerFunction); 

これはボディではなく、より具体的な親要素上にあります。私はあなたがページ構造であることを知らないので、これは簡単な例でした。