Как отменить привязку всех событий внутри элемента - PullRequest
Новая
       30

Как отменить привязку всех событий внутри элемента

2 голосов
/ 08 июля 2019

Я пытаюсь unbind / off всех событий каждого элемента внутри одного элемента. Я пробовал это решение, но оно не работает. Единственное, что сработало, было $(document).add('*').off();, но это не то, что мне нужно.

Я сделал короткий пример, но есть больше элементов и событий.
Почему не работает этот код? 

$(document).ready(function() {

    $(document).on("click", "#contentWithEvents button", function() {
        console.log("Clicked");
    });

    $(document).on("mouseenter", "#contentWithEvents li div", function() {
        console.log("Hovered");
    });

    $(document).on("click", "#unbind", function() {
        contentToBeReplaced = $("#contentWithEvents");
        contentToBeReplaced.find("*").each(function() {
            $(this).off();
        });
    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header></header>

<main id="contentWithEvents">

    <button>Click event</button>
    <button>Click event</button>
    <button>Click event</button>
    
    <ul>
      <li><div>Hover event</div></li>
      <li><div>Hover event</div></li>
    </ul>
    
</main>

<button id="unbind">Unbind all events</button>

<footer></footer>

Ответы [ 3 ]

3 голосов
/ 08 июля 2019

Вместо делегирования событий документа с помощью $(document), почему бы не делегировать элементы напрямую с помощью селекторов, содержащих родительский идентификатор и тип элемента. Это поможет отменить привязку событий этих элементов, используя off() (конкретные события: .off('mouseenter') или все события: .off()) 

$(document).ready(function() {

  $("#contentWithEvents button").on("click", function() {
    console.log("Clicked");
  });

  $("#contentWithEvents li div").on("mouseenter", function() {
    console.log("Hovered");
  });

  $("#unbind").on("click", function() {
    contentToBeReplaced = $("#contentWithEvents");
    contentToBeReplaced.find("*").off();
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header></header>

<main id="contentWithEvents">

  <button>Click event</button>
  <button>Click event</button>
  <button>Click event</button>

  <ul>
    <li>
      <div>Hover event</div>
    </li>
    <li>
      <div>Hover event</div>
    </li>
  </ul>

</main>

<button id="unbind">Unbind all events</button>

<footer></footer>
2 голосов
/ 08 июля 2019

Кажется, лучший способ - делегировать селектор класса, а затем удалить класс, если вы больше не хотите отвечать на события

Также я удалил делегирование на главной кнопке и кнопке, поскольку у них есть идентификатор. Если они генерируются динамически, их необходимо делегировать из ближайшего статического контейнера 

$(document).ready(function() {

  $("#contentWithEvents").on("click", ".delegated", function() {
    console.log("Clicked");
  });

  $("#contentWithEvents").on("mouseenter", ".delegated", function() {
    console.log("Hovered");
  });

  $("#unbind").on("click", function() {
    $("#contentWithEvents .delegated").removeClass("delegated");
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header></header>

<main id="contentWithEvents">

  <button class="delegated">Click event</button>
  <button class="delegated">Click event</button>
  <button class="delegated">Click event</button>

  <ul>
    <li>
      <div class="delegated">Hover event</div>
    </li>
    <li>
      <div class="delegated">Hover event</div>
    </li>
  </ul>

</main>

<button id="unbind">Unbind all events</button>

<footer></footer>
1 голос
/ 08 июля 2019

это довольно просто, на самом деле вы просто неправильно использовали команду .off () 

$(document).ready(function() {

    $(document).on("click", "#contentWithEvents button", function() {
        console.log("Clicked");
    });

    $(document).on("mouseenter", "#contentWithEvents li div", function() {
        console.log("Hovered");
    });

    $(document).on("click", "#unbind", function() {
        $(document).off( "click", "#contentWithEvents button" );
        $(document).off( "mouseenter", "#contentWithEvents li div" );
    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header></header>

<main id="contentWithEvents">

    <button>Click event</button>
    <button>Click event</button>
    <button>Click event</button>
    
    <ul>
      <li><div>Hover event</div></li>
      <li><div>Hover event</div></li>
    </ul>
    
</main>

<button id="unbind">Unbind all events</button>

<footer></footer>
...