1
votes

Supprimer des événements sur un élément HTML

J'ai un élément textarea . Quelque part dans ce désordre de code hérité, je crois qu'un événement est enregistré, m'empêchant de saisir du texte dans la zone de texte. J'ai essayé le code suivant.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="noteseditable" id="clinicalNotesEditable" style="width: 370px !important; vertical-align: middle; display: inline-block; -ms-overflow-y: scroll;" placeholder="click here to enter a note" rows="8"></textarea>

$('#clinicalNotesEditable').off("keyup keydown keypress change blur");

$('#clinicalNotesEditable').on("click", function() {
  $(this).attr('disabled', false);
  $(this).attr('readonly', false);
  console.log('Click on textarea by ID');
  // I can see the CLICK event is captured.
});


$('#clinicalNotesEditable').on("keyup keydown keypress", function() {
  console.log('Key pressed on textarea by ID');
  // I do not see this message.
});

La seule chose à laquelle je pense, c'est que je n'utilise pas correctement .off () . Comment puis-je supprimer tous les événements de l'élément ClinicalNotesEditable ?

javascript jquery dom-events

8 commentaires

Vous utilisez correctement off () . Il est difficile de dire quel est le problème car il n'y a pas de problème dans votre extrait.

.off () ne supprimera que les écouteurs d'événements qui ont été ajoutés avec jQuery, pas s'ils ont été ajoutés avec du JavaScript brut.

Vous pouvez utiliser DevTools pour voir tous les écouteurs d'événements associés à un élément.

Je suis presque sûr que l'événement a été ajouté avec jQuery. C'est surtout ce qui est utilisé dans cette boutique.

De plus, $ ("# ClinicalNotesEditable"). Off () ne désactivera pas les gestionnaires délégués à partir d'un conteneur.

@Barmar y a-t-il un moyen de faire ça? Je pense que l'élément de désactivation peut provenir d'un parent ou d'un conteneur ...

Vous auriez besoin de savoir quel conteneur, puisque vous devez appeler .off () sur le même élément.

Le code de la question supprime les gestionnaires d'événements, puis le gestionnaire d'événements a été rattaché.

3 Réponses :

0
votes

En fonction de l'ordre du code que vous avez ici, si vous réorganisez le code comme suit:

$('#clinicalNotesEditable').on("keyup keydown keypress", function() {
  console.log('Key pressed on textarea by ID');
  //keyup keydown and keypress events are removed
});
$('#clinicalNotesEditable').off("keyup keydown keypress change blur");

$('#clinicalNotesEditable').on("click", function() {
  $(this).attr('disabled', false);
  $(this).attr('readonly', false);
  console.log('Click on textarea by ID');
});

Les événements de keyup keydown sont supprimés et vous verrez le texte "Click on textarea by ID" dans la console. Je ne sais pas si c'est ce que vous essayez de réaliser. J'ai exécuté le code et j'ai pu ajouter du texte dans textarea.

4 commentaires

Il y a un événement lié à l'élément quelque part plus haut dans la chaîne qui m'empêche d'entrer du texte dans la zone de texte.

Puisque vous avez mentionné que cela provient d'un code hérité de mess, au lieu d'utiliser la méthode jQuery .on (), veuillez essayer d'utiliser le JavaScript pur pour supprimer / ajouter un événement comme ci-dessous: document.getElementById ("ClinicalNotesEditable"). AddEventLis‌ tener ("keydown ", function () {console.log ('Touche appuyée sur la zone de texte par ID');}); ou voici ma deuxième pensée: assurez-vous qu'il n'y a pas d'attribut HTML disabled = "disabled" appliqué en arrière-plan par javascript.

Assurez-vous également qu'il n'y a qu'une seule version de la bibliothèque jQuery en cours de chargement.

Seule la version 3.2.1 est chargée.

1
votes

Vous pouvez itérer jQuery._data (, 'events') et supprimer les données des événements délégués et non délégués

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="noteseditable" id="clinicalNotesEditable" style="width: 370px !important; vertical-align: middle; display: inline-block; -ms-overflow-y: scroll;" placeholder="click here to enter a note" rows="8"></textarea>

$("body").on('click', '#clinicalNotesEditable', function() {
  console.log('delegated');
});

$("body").on('click', function() {
  console.log('not delegated');
});

$('#clinicalNotesEditable').on("click", function() {
  $(this).attr('disabled', false);
  $(this).attr('readonly', false);
  console.log('Click on textarea by ID');
});


$('#clinicalNotesEditable').on("keyup keydown keypress", function() {
  console.log('Key pressed on textarea by ID');
  //I see this in the CONSOLE
});

var selector = '#clinicalNotesEditable';

$.each([$(window), $(document), $("*")], function(key, value) {
  $.each(value, function(k, v) {
    var event = $._data(v, "events");
    if (event !== undefined) {
      $.each(event, function(a, b) {
        if (b[0].selector === selector) {
          $(v).off(a, '**');
        } else {
          if ('#' + v.id === selector) {
            $(selector).off(a);
          }
        }
      });    
    }
  });
});

0 commentaires

0
votes

Vous pouvez unbind () au lieu de off ()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="noteseditable" id="clinicalNotesEditable" style="width: 370px !important; vertical-align: middle; display: inline-block; -ms-overflow-y: scroll;" placeholder="click here to enter a note" rows="8"></textarea>

$('#clinicalNotesEditable').off("keyup keydown keypress change blur");

$('#clinicalNotesEditable').on("click", function() {
  $(this).attr('disabled', false);
  $(this).attr('readonly', false);
  console.log('Click on textarea by ID');
});


$('#clinicalNotesEditable').on("keyup keydown keypress", function() {
  console.log('Key pressed on textarea by ID');
  //I see this in the CONSOLE
});
$('#clinicalNotesEditable').unbind()

0 commentaires