0

PHP から返された JSON に基づいて多数のボタンを作成する必要があります (データベースからその情報を取得するために MySQL を使用しています)。以下のコードは、必要なボタンを作成することで機能しますが、何らかの理由で、リストの最初のボタンをクリックしたときにのみクリック ハンドラーが呼び出されます。ハンドラーがすべてのボタンに対して起動しない理由と、それを修正する方法はありますか?

$(document).ready(function () {

$.ajax({ url: "file.php", data: "id=1", dataType: "json", type: "post",
  success: function(data) {
    $.each(data, function(index, element) {
      var classBtns="";
      $.each(return_array(element.date), function(i, d) {
        class_button = "<span class='button' id='classBtn' data-date='"+d+"' data-time='"+element.time+"'>Press</span>";
        classBtns += "<p class='goingDates'>"+d+class_button+"</p>";
      });
      $('div').append(classBtns);
    });

    $("#classBtn").on("click", function() {
      alert("clicked "+$(this).data('date'));
    });
  }
});
});

また、$(this).data を介してデータを渡すことは、必要なデータをクリック ハンドラーに取得するための最良の方法ですか? 可能であれば HTML に表示されないようにしたいのですが、ハンドラーがそのデータにアクセスできるようにする別の理由がわかりません。クリック ハンドラーを $.each ステートメントのいずれかに配置すると、ボタンがクリックされたときにアラートが複数回呼び出されます。

4

3 に答える 3