2
votes

Comment dissocier tous les événements à l'intérieur de l'élément

J'essaye de dissocier / désactiver tous les événements de chaque élément à l'intérieur d'un élément. J'ai essayé cette solution mais cela ne fonctionne pas. La seule chose qui fonctionnait était $ (document) .add ('*'). Off (); mais ce n'est pas ce dont j'ai besoin.

J'ai fait un petit exemple, mais il y a plus d'éléments et d'événements.
Pourquoi ce code ne fonctionne-t-il pas?

<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>

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

});

javascript jquery html events dom-events

1 commentaires

Parce que c'est délégué. Donc, vous déléguez sur le document mais vous détachez l'élément

3 Réponses :

4
votes

Au lieu de déléguer des événements de document avec $ (document) pourquoi ne pas déléguer les éléments directement avec les sélecteurs contenant l'id parent et le type d'élément. Cela aiderait à dissocier les événements de ces éléments en utilisant off () (événements spécifiques: .off ('mouseenter') ou tous les événements: .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>

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

});

0 commentaires

2
votes

Il semble que le meilleur moyen soit de déléguer sur le sélecteur de classe, puis de supprimer la classe lorsque vous ne voulez plus répondre aux événements.

J'ai également supprimé la délégation sur le bouton principal et car ils ont un identifiant. S'ils sont générés dynamiquement, ils doivent être délégués à partir du conteneur statique le plus proche

<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>

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

});

0 commentaires

1
votes

c'est assez simple en fait, vous utilisiez simplement la commande .off () dans le mauvais sens

<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>

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

});

0 commentaires