jQuery如何将事件绑定到删除并再次添加的元素答案

【问题标题】：jQuery how to bind event to element which is deleted and added againjQuery如何将事件绑定到删除并再次添加的元素
【发布时间】：2015-07-25 10:51:36
【问题描述】：

我正在使用 jQuery 和一个名为 jQuery.Modal 的模态库。我有一个自定义功能来显示此模式以适应 UI 设计：

show: function (option) {
    var view = new Modal.View();
    sdhapp.modalRegion.show(view);
    $(".sdh-ui.modal-header").html(option.title);
    $(".sdh-ui.modal-body").empty();
    if (option.image) {
       if (option.image === 'error') {
          $(".sdh-ui.modal-body").append(
                  '<div class="image-box" style="background-image: url(images/error-icon.png)"></div>');
       }
    }
    if (option.confirmButton === true) {
       $(".sdh-ui.modal-footer").html(
               '<button type="button" id="modal-confirm-button">Confirm</button><button type="button" id="modal-cancel-button">Cancel</button>');
    }
     $(".sdh-ui.modal-body").append(option.body);
    $('#error-modal-form').modal({
       showClose: false
    });
    bindModalEvents(option);
}

其中 view 是呈现模态体的 Marionette 视图。

我正在绑定点击事件：

  $('#modal-cancel-button').on('click', function () {
     unbindModalEvents();
     $.modal.close();
     if (option.cancel)
        option.cancel.call();
  });
  $('#modal-confirm-button').on('click', function () {
     unbindModalEvents();
     $.modal.close();
     if (option.confirm)
        option.confirm.call();
  });
  $('#modal-ok-button').on('click', function () {
     unbindModalEvents();
     $.modal.close();
     if (option.ok)
        option.ok.call();
  });

并解除绑定： var unbindModalEvents = 函数（）{ console.log('调用'); $('#modal-cancel-button').unbind('click'); $('#modal-confirm-button').unbind('click'); $('#modal-ok-button').unbind('click'); };

问题是点击事件（关闭函数）只触发一次。如果我第二次显示模态，则不会触发点击事件

我尝试删除元素，使用“bind”而不是“on”，但没有任何效果

有什么建议吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

当您关闭模式时，它会从 DOM 中删除。这意味着任何绑定到的事件处理程序也将消失。试试这个：

$('body').on('click', '#modal-cancel-button', function () {
  unbindModalEvents();
  $.modal.close();
  if (option.cancel)
     option.cancel.call();
});
$('body').on('click', '#modal-confirm-button', function () {
  unbindModalEvents();
  $.modal.close();
  if (option.confirm)
     option.confirm.call();
});
$('body').on('click', '#modal-ok-button', function () {
  unbindModalEvents();
  $.modal.close();
  if (option.ok)
    option.ok.call();
});

这将处理程序绑定到主体，然后监视源自模态的事件。您可以根据需要添加和创建任意数量的处理程序，并且不会删除处理程序。

【讨论】：