Question

我有以下代码：

$(document).ready(function () {
  EnableModal();
});

function EnableModal() {
  if (isModalEnabled) { return; }

  // Initialize modal dialog
  // attach modal-container bootstrap attributes to links with .modal-link class.
  // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
  $('body').on('click', '.modal-link', function (e) {
    e.preventDefault();
    $(this).attr('data-target', '#modal-container');
    $(this).attr('data-toggle', 'modal');
  });

}

function DisableModal() {
  $('body').off('click', '.modal-link');
}

我试图在某些情况下关闭它，所以我打电话：

$('body').off('click', '.modal-link');

但是，具有modal-link类的按钮仍然允许点击事件。我发现开发人员控制台没有错误。

我已经验证它正确地调用了这些并且每个只在我的测试用例中被调用一次。

我在这里做错了什么？

Answer 1

之前我遇到过这个问题。我不确定最初发生了什么，并想知道是不是因为选择器实际上并不相同。我检查了它们，发现它们是相同的，但仍然无法删除事件处理程序。

我最后通过在删除原始函数后将虚函数作为事件处理程序来修复此问题。

function DisableModal() {
$('body').off('click', '.modal-link');
$('body').on('click', '.modal-link', () => {});
}

如果您不喜欢lambda表达式，请随意使用ES5版本。如

$('body').on('click', '.modal-link', function(){});

Answer 2

在这里工作正常：

var isModalEnabled;

$(document).ready(function () {
  EnableModal();
  $(".disableModal").click(DisableModal);
});

function EnableModal() {
  if (isModalEnabled) { return; }

  // Initialize modal dialog
  // attach modal-container bootstrap attributes to links with .modal-link class.
  // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
  $('body').on('click', '.modal-link', function (e) {
    e.preventDefault();
    $(this).attr('data-target', '#modal-container');
    $(this).attr('data-toggle', 'modal');
  });

}

function DisableModal() {
  $('body').off('click', '.modal-link');
}

body { font-family: sans-serif; }
[data-target='#modal-container'] {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Click a few "Modal Link" buttons, and watch the button text turn bold.  Then click the "Disable Modal" button, and click the remaining "Modal Link" buttons.  The button text does <em>not</em> turn bold.</p>
<button class="modal-link">Modal Link</button>
<button class="modal-link">Modal Link</button>
<button class="modal-link">Modal Link</button>
<p><button class="disableModal">Disable Modal</button></p>
<button class="modal-link">Modal Link</button>
<button class="modal-link">Modal Link</button>
<button class="modal-link">Modal Link</button>
<p>To reset, click the "Run code snippet" button above.</p>

Answer 3

在不知道其真正原因的情况下，解决方案可能是使用命名空间事件。

$('body').on('click.modal', '.modal-link', function (e) { });

并将其删除

$('body').off('.modal');

但是我觉得它与此无关，但真正的问题在于引导模式。也许你需要清理这些属性。

$('[data-toggle="modal"]').removeAttr("data-target data-toggle");

jQuery off（）没有删除点击处理程序

3 个答案: