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

1

首先ID在 HTML 页面中应该是唯一的。

接下来，您需要为动态创建的元素委派事件以使点击事件起作用

如果有多个相同的元素ID

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

利用class instead..

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

并更改这段代码

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

至

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

为了获得更好的性能，您可以将事件委托给 astatic 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'));
    });
});
于 2013-06-20T23:49:10.290 回答
0

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

于 2013-06-20T23:49:25.623 回答
0

使用 class="classBtn" 而不是 id="classBtn"。$(this).data 也可以正常工作。

于 2013-06-20T23:50:19.823 回答