生成后如何將事件綁定到元素

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

您正在嘗試向尚未添加的事件添加事件監聽器。 這將導致錯誤，並且該事件將不會再次觸發。

因此，請嘗試在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

盡管.delegate（）方法在jquery-3.0中已被棄用，但其描述仍然值得一看：

根據一組特定的根元素，現在或將來將與選擇器匹配的所有元素的處理程序附加到一個或多個事件。

范例：

// 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 () {...});
});