AJAXを使用して動的に作成されたコンテンツをターゲットにして更新する

Question

ユーザーが既存の質問に返信できる質問/回答システムを作成しようとしています。質問システムは正しく掲示してデータベースに表示していますが、私は動的に作成された質問に答えるのが難しいです。

ここにスペースを節約するためには、ループ内で、このラインから呼び出され

$(document).ready(function() { 
//make sure it was the postReply button 
    $("#postReply").on("click", function(){ 
     //get the questionID the user just clicked on 
     var questionID=$(this).val(); 
     //hide the reply button 
     $("#postReply").hide(); 
     //show the reply framework 
     $('.reply').append('<div class="replycontent"><p><textarea name="answer" id="answer" placeholder="Enter your answer"></textarea></p><p><button id="postAnswer" type="submit">Post Answer</button></p></div>'); 
    }); 
}); 

を失敗しているコードです：

echo '<p><button type="submit" id="postReply" value='.$questionID.'>Reply</button></p> '; 
echo '<div class="reply" id="reply'.$questionID.'">'; 

私はヒットの問題は、私が更新してdiv要素を追加していていることです.replyが誤ってターゲティングされているため、すべての質問にクリックされたquestionIDを対象にすることはできません。私はアラートでテストしようとしましたが、最新の質問ボタンだけがスクリプトを解析しています。

最新のコメントからボタンを非表示にすることができます。

これは、上記の質問に返信ボタンをクリックするとコードは次のようになりますSQLクエリから作成されたHTMLソースの出力

<p>Question ID: 34 Title: z Description: zz Date Posted:2017-08-04 05:31:28</p> 
<p><button type="submit" id="postReply" value=34>Reply</button></p> 
<div class="reply" id="reply34"></div> 

です：

<p>Question ID: 34 Title: z Description: zz Date Posted:2017-08-04 05:31:28</p> 
<div class="reply" id="reply34"> 
    <div class="replycontent"> 
     <p><textarea name="answer" id="answer" placeholder="Enter your answer"></textarea></p> 
     <p><button id="postAnswer" type="submit">Post Answer</button></p> 
    </div> 
</div> 

Answer 1

私は実際に問題を理解することはできませんが、これを置き換えてみてください：

$('.reply').append('<div class="replycontent"><p><textarea name="answer" id="answer" placeholder="Enter your answer"></textarea></p><p><button id="postAnswer" type="submit">Post Answer</button></p></div>'); 

これによって：

$('#reply' + questionID).append('<div class="replycontent"><p><textarea name="answer" id="answer" placeholder="Enter your answer"></textarea></p><p><button id="postAnswer" type="submit">Post Answer</button></p></div>'); 

フィールドにはすべて異なるID属性がありますので、使用することができます。

ボタンを非表示にするには、それらのIDがすべて同じであるため、セレクタは$('#postRelpy[value="' + questionID + '"]')のように見えます。