Удалить кратны тот же обработчик событий с помощью .off()

Question

поручает два обработчика событий:

$('#myElement').on('click', '.classA', doSomething); 
$('#myElement').on('click', '.classB', doSomethingElse); 

Я хочу, чтобы удалить как обработчик. Я знаю, что я могу сделать:

$('#myElement') 
    .off('click', '.classA') 
    .off('click', '.classB'); 

Я думал, что это было бы возможно в одной строке, но оба из них не в состоянии:

$('#myElement').off('click', '.classA, .classB'); 
$('#myElement').off('click', '.classA .classB'); 

Есть ли способ сделать это в одной команде?

Answer 1

Посмотрев на источник, вы увидите в off: -

return this.each(function() { 
    jQuery.event.remove(this, types, fn, selector); 
} 

что означает, что селектор должен быть точно, как она была создана.

Поэтому вам нужно использовать: -

$('#myElement').on('click', '.classA', function() { alert('A'); }); 
 
$('#myElement').on('click', '.classB', function() { alert('B'); }); 
 

 
$('#myElement').off('click', '.classA').off('click', '.classB'); 
 

 
$('#myElement').on('click', '.classA', function() { alert('A'); }); 
 
$('#myElement').on('click', '.classB', function() { alert('B'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="myElement"> 
 
    <button class="classA">A</button> 
 
    <button class="classB">B</button> 
 
</div>

Answer 2

Здесь вы используете пространство имен дот-стилей для идентификации отдельных обработчиков, это хорошо, но как это называется «пространство имен» по jQuery docs, и его вид выглядит как классы css, он больше разработан для соответствия группе обработчиков. Поэтому, если вы не различаете два события «classA» и «classB», вы можете просто использовать «classCommon» для обоих из них, а затем развязать их позже, используя «classCommon», пример которого я только что нашел на off's document page (см. последний пример в нижней части страницы).

И, как было предложено выше, все это должно происходить на одном и том же элементе. Тот же селектор, если быть точным. Поэтому, если ваш вопрос о нескольких HTMLElements, вам нужно будет изменить #myElement на .elementsIWantToHandleTogether.

Answer 3

From the manual:

Для удаления определенных делегированных обработчиков событий, обеспечивают selector аргумент. Строка селектора должна точно соответствовать той, которая была передана в .on(), когда был подключен обработчик событий. Чтобы удалить все делегированные события из элемента без удаления не делегированных событий, используйте специальное значение "**".

Это означает, что можно использовать "**" удалить все делегированных обработчиков событий, однако, вы можете больше не ориентированы на конкретные классы:

$(function() { 
 

 
    $("#attach-event").on("click", function() { 
 
    $("#myElement").on("click", ".classA", function() { alert(".classA"); }); 
 
    $("#myElement").on("click", ".classB", function() { alert(".classB"); }); 
 
    $("#attach-event").prop("disabled", true); 
 
    $("#remove-event").prop("disabled", false); 
 
    }).trigger("click"); 
 

 
    $("#remove-event").on("click", function() { 
 
    $("#myElement").off("click", "**"); 
 
    $("#attach-event").prop("disabled", false); 
 
    $("#remove-event").prop("disabled", true); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<button id="attach-event">Attach event handlers</button> 
 
<button id="remove-event">Remove event handlers</button> 
 
<div id="myElement"> 
 
    <button class="classA">A</button> 
 
    <button class="classB">B</button> 
 
</div>

Другой (и, вероятно, лучше) решение заключается в использовании пространства имен для обработчиков событий, что упрощает управление:

$(function() { 
 

 
    $("#attach-event").on("click", function() { 
 
    $("#myElement").on("click.removable", ".classA", function() { alert(".classA clicked"); }); 
 
    $("#myElement").on("click.removable", ".classB", function() { alert(".classB clicked"); }); 
 
    $("#myElement").on("click", ".classC", function() { alert(".classC clicked"); }); 
 
    $("#attach-event").prop("disabled", true); 
 
    $("#remove-event").prop("disabled", false); 
 
    }).trigger("click"); 
 

 
    $("#remove-event").on("click", function() { 
 
    $("#myElement").off("click.removable"); 
 
    $("#attach-event").prop("disabled", false); 
 
    $("#remove-event").prop("disabled", true); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<button id="attach-event">Attach event handlers</button> 
 
<button id="remove-event">Remove event handlers</button> 
 
<div id="myElement"> 
 
    <button class="classA">A</button> 
 
    <button class="classB">B</button> 
 
    <button class="classC">C</button> 
 
</div>