Question

我需要根据从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中不可见，但我无法弄清楚为什么要让处理程序可以访问这些数据。如果我将click处理程序放在任何$ .each语句中，则单击一个按钮时会多次调用该警报。

Answer 1

HTML页面中的第一个ID 应该是唯一的。

接下来，您需要为动态创建的元素 委派事件才能使点击事件生效

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

此选择器$('#classBtn')只会获取第一个实例，无论该ID有多少元素可用。

使用class instead..

我看到你已经为元素定义了类。所以摆脱ID

并改变这段代码

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

到

 $(document).on("click", ".button" function() {

为了获得更好的效果，您可以将事件委派给static Ancestor元素，而不是document。

您绑定事件的方式可能会多次绑定到同一个元素。因此，将该段代码移到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'));
    });
});

Answer 2

像“#classBtn”这样的ID是唯一的，所以JQuery只会使用它找到的第一个实例。使用类代替（例如“.classBtn”）。

Answer 3

使用class =“classBtn”而不是id =“classBtn”。 $（this）.data也能正常工作。

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

3 个答案: