0

次のコードでは、jQuery を使用して div に表示される配列にいくつかのコメントがあります。各コメントには、新しいコメントを投稿するまで正常に機能するオプション ボタンがあります。各要素に一意の ID を使用しようとしましたが、うまくいきませんでした。

ページが読み込まれると、オプション ボタンが機能します。しかし、新しいコメントを送信すると、どのボタンも機能しません。私は何を間違っていますか？

これが私のスクリプトです：

var i = 0;
var comments_display= "";
var comments = ['Hello World!', 'Hello! This is a comment.'];

//reads the entire array, creates the content, and sends it to the div
function show_comments(){
   for (i=0; i<comments.length; i++){
     comments_display += "<div class='single_comment_container'>";
     comments_display += "<div class='comment_comment'>" + comments[i] + "</div>";
     comments_display += "<div class='options'>Options</div></div>";
    }
    $("#comment_container").html(comments_display);
    comments_display = "";
 }

//appends a new comment to the array
function new_comment(){
   if ($("#comment_input").val() == null || $("#comment_input").val() == ""){
      alert("Your comment must be at least 1 character long.");
   }

   else{
      comments.push($('#comment_input').val());
       show_comments();
       $("#comment_input").val("");
   }
}

$(document).ready(function(){
   show_comments();

   $("#submit_comment").click(function(){
      new_comment();
   });

//display a message when an element of the class 'options' is clicked
$(".options").click(function(){
   alert("OPTIONS");
});

});

そして、これがどのように機能するかを確認するためのフィドルです。http://jsfiddle.net/fahKb/3/

この質問を読んでいただきありがとうございます。

4

3 に答える 3

3

委任を使用する必要があります。

$(document).on( 'click', '.options', function() {
   alert("OPTIONS");
});

http://api.jquery.com/on/

注: 以外の静的要素を使用することもできdocumentます。div（常にページか何かにいる親。）

于 2013-01-10T18:57:55.737 に答える
2

要素を動的に追加しているため、クリックが機能しないため、ページ上で最も近い既存の親を見つける必要がありcomment_containerます.on()。4/

$('#comment_container').on('click',".options",function(){
  alert("OPTIONS");
});
于 2013-01-10T19:02:39.993 に答える
0 
$(document).on( 'click', '.options', function() {
   alert("OPTIONS");
});

この最初の応答は正しいです。これの原因は、要素が DOM に読み込まれるときに、イベント リスナーを割り当てることです。基本的に、これが「クリック」されたら、何かをしてください。問題は、新しい要素を追加するときに、イベント リスナーも追加していないことです。上記のコードのようなことを行うことで、基本的に、「.options」のクラスを持つドキュメント内のすべてを検索し、最後にクリックされた場合は、いくつかのコードを実行して実行します。

そうは言っても、ドキュメントを使用することは最適な方法ではありませんが、必要な場合もあります。より良い解決策は、すべてのコメントを「div」またはその他の要素でラップし、それをドキュメントの代わりに渡すことです。これにより、ドキュメント全体で「.options」を検索する代わりに、ラッパーのみを検索して、多くの不要な作業を排除します。

$('.commentWrapper').on( 'click', '.options', function() {
   alert("OPTIONS");
});
于 2013-01-10T20:05:15.943 に答える