Question

我有这个脚本：

$(window).load(function () {
$(document).on('click', '.btn-delete-confirm', function () {...});
});

我有这个元素：

<div id="attachments"></div>

我有这个脚本来加载一些html：

    $(document).on('click', '.nav-tabs li a[href="#attach"]', function () {

    $.ajax({
        url: loadAttachmentsURL,
        data: { equipmentId: equipmentId },
        success: function (data) {
            $("#attachments").html(data);
        }
    });

});

在ajax的结果中，我有一些.btn-delete-confirm class的按钮，但点击它们时没有任何反应。结果样本如下：

<td><a  data-id="73b2db39-199c-845c-8807-6c6164d2d97d" data-url="/Admin/EquipmentAttachment/Delete" class="btn-delete-confirm btn">Delete</a></td>

我该如何解决这个问题？

Answer 1

一种方法是在设置html后附加click事件：

  $(document).on('click', '.nav-tabs li a[href="#attach"]', function() {
      var equipmentId = "?";
      var loadAttachmentsURL = "/url";
      $.ajax({
          url: loadAttachmentsURL,
          data: {
              equipmentId: equipmentId
          },
          success: function(data) {
              $("#attachments").html(data);
              $(".btn-delete-confirm").click(function() {
                  alert("click!");
              });
          }
      });
  });

另一个将click事件附加到document上下文：

$(document).on('click', ".btn-delete-confirm", function() {
    alert("click!");
});
$(document).on('click', '.nav-tabs li a[href="#attach"]', function() {
    var equipmentId = "?";
    var loadAttachmentsURL = "/url";
    $.ajax({
        url: loadAttachmentsURL,
        data: {
            equipmentId: equipmentId
        },
        success: function(data) {
            $("#attachments").html(data);
        }
    });
});

Answer 2

您正在尝试将eventlistener添加到尚未存在的内容中。这将导致错误，并且事件不会再次触发。

因此尝试在ajax导入后添加侦听器。

$(document).on('click', '.nav-tabs li a[href="#attach"]', function () {

$.ajax({
    url: loadAttachmentsURL,
    data: { equipmentId: equipmentId },
    success: function (data) {
        $('#attachments').html(data);
        $('.btn-delete-confirm').on('click', function () {...});
    }
});

}）;

Answer 3

虽然在jquery-3.0中不推荐使用.delegate()方法，但其描述仍然值得一看：

为所有匹配的元素附加处理程序到一个或多个事件选择器，现在或将来，基于一组特定的根元件。

<强>〔实施例：

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

使用document作为根元素不是一个大问题，但您尝试过#attachments吗？

$(window).load(function () {
    $("#attachments").on('click', '.btn-delete-confirm', function () {...});
});

生成后如何将事件绑定到元素

3 个答案: