Question

我正在使用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);
}

视图是呈现模态体的木偶视图。

我正在绑定点击事件：

  $('#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 = function（）{ 的console.log（＆＃39;称为＆＃39）; $（＆＃39;＃模式，取消按钮＆＃39;）。解除绑定（＆＃39;单击＆＃39;）; $（＆＃39;＃模式，确认键＆＃39;）。解除绑定（＆＃39;单击＆＃39;）; $（＆＃39;＃模式-OK按钮＆＃39;）。解除绑定（＆＃39;单击＆＃39;）; };

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

我尝试删除元素，使用＆＃34; bind＆＃34;而不是＆＃34; on＆＃34;但没有任何作用

有什么建议吗？

Answer 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();
});

这将处理程序绑定到正文，然后正在监视源自模态的事件。您可以根据自己的喜好添加和创建，并且处理程序不会被删除。

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

1 个答案: