JQuery выключен() не снимая щелчок обработчика

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',() => {}); 
} 

Не стесняйтесь использовать версию 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");