jQuery单击处理程序未为所有元素触发

我需要基于从php返回的JSON（在php中我使用MySQL从数据库获取该信息）创建许多按钮。下面的代码通过创建我需要的按钮来工作，但是由于某些原因，只有在我单击列表中的第一个按钮时才会调用click处理程序。你知道为什么处理程序不能触发所有按钮，以及我如何修复它吗

$(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'));
    });
  }
});
});

$（文档）.ready（函数（）{
$.ajax（{url:“file.php”，数据：“id=1”，数据类型：“json”，类型：“post”，
成功：功能（数据）{
$.each（数据、函数（索引、元素）{
var classBtns=“”；
$.each（返回数组（element.date），函数（i，d）{
class_button=“Press”；
classBtns+=“
”+d+class_按钮+”
”；
});
$（'div'）.append（classBtns）；
});
$（“#classBtn”）。在（“单击”，函数（）{
警报（“单击“+$（此）.data（'date'））；
});
}
});
});

---

另外，通过$（this.data）传递数据是否是将所需数据放入单击处理程序的最佳方式？如果可能的话，我希望它在HTML中不可见，但是我不明白为什么处理程序可以访问这些数据。如果我将click处理程序放在任何$.each语句中，则在单击按钮时会多次调用警报。

HTML页面中的第一个

ID

应该是唯一的。

接下来，您需要为动态创建的元素委派事件，以使单击事件正常工作

如果有多个元素具有相同的

ID

此选择器

$（'#classBtn'）

将仅获取第一个实例，无论有多少个具有该ID的元素可用

改用

类..

我看到您已经为元素定义了类。所以去掉

ID

并更改这段代码

 $("#classBtn").on("click", function() {

到

为了获得更好的性能，您可以将事件委托给元素的

静态祖先

，而不是

文档

按照绑定事件的方式，它们可能会多次绑定到同一元素。因此，将这段代码移到Ajax请求之外

$(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);
            });
        }
    });

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

$（文档）.ready（函数（）{
$.ajax({
url:“file.php”，
数据：“id=1”，
数据类型：“json”，
类型：“post”，
成功：功能（数据）{
$.each（数据、函数（索引、元素）{
var classBtns=“”；
$.each（返回数组（element.date），函数（i，d）{
class_button=“Press”；
classBtns+=“
”+d+class_按钮+”
”；
});
$（'div'）.append（classBtns）；
});
}
});
$（文档）.on（“单击”、“.button”函数（）{
警报（“单击“+$（此）.data（'date'））；
});
});

像“#classBtn”这样的ID意味着是唯一的，因此JQuery将只使用它找到的第一个实例。使用类代替（例如“.classBtn”）。

使用class=“classBtn”代替id=“classBtn”$（这个）。数据也可以正常工作。

这是因为您使用的是ID选择器而不是CLASSGood catch。一开始我没有注意到授权的事情。在我看来，这是公认的答案。不是我的。：-）他是在添加动态元素后绑定click处理程序的，而不是在加载DOM时绑定的，所以实际上并不需要委托。啊哈，对了。。我没有注意到。。谢谢你指出这一点

$(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);
            });
        }
    });

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