J'ai le bouton suivant:

<button type="button" 
        id="btn1" 
        class="btn btn-default disabled" 
        data-id="btn1">
        Click me
</button>

Et j'ai ce code jQuery:

$(function() {
  $("#btn1").click(function() {
    alert('Clicked');
  });

  $('button.btn.btn-default.disabled').click(function(ev) {
    var id = $(this).attr('data-id');

    if (id == 'btn1') {
      alert('You click me once');
    }
  });
});

Si vous cliquez sur #btn1, vous entrerez dans la première alerte et ensuite vous passerez dans la seconde. Exemple ici.

Je dois d'abord exécuter cet événement $('button.btn.btn-default.disabled').click(), puis si la correspondance id désactive / annule la liaison du reste des événements associés au bouton avec l'ID correspondant.

De l'aide?

0
ReynierPM 16 janv. 2017 à 21:42

2 réponses

Meilleure réponse

Plusieurs gestionnaires d'événements jQuery (et gestionnaires d'événements DOM2) sur le même élément pour le même événement sont déclenchés dans l'ordre dans lequel ils ont été attachés. Il n'y a pas de mécanisme pour sauter la file d'attente. Vous devrez donc d'abord enregistrer votre deuxième gestionnaire.

Une fois que vous avez fait cela, vous pouvez utiliser ev.stopImmediatePropagation() pour empêcher le déclenchement d'autres gestionnaires pour le même événement sur cet élément. Et / ou supprimer d'autres gestionnaires via off, etc.

Exemple:

$(function() {
  $('button.btn.btn-default.disabled').click(function(ev) {
    var id = $(this).attr('data-id');

    if (id == 'btn1') {
      console.log('You click me once');
      ev.stopImmediatePropagation();
    }
  });
  $("#btn1").click(function() {
    console.log('Clicked btn1');
  });
  $("#btn2").click(function() {
    console.log('Clicked btn2');
  });
});
<button type="button" 
        id="btn1" 
        class="btn btn-default disabled" 
        data-id="btn1">
        btn1
</button>
<button type="button" 
        id="btn2" 
        class="btn btn-default disabled" 
        data-id="btn2">
        btn2
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
T.J. Crowder 16 janv. 2017 à 18:45

Cela devrait faire ce dont vous avez besoin:

$(function() {
  var $disabledButtons = $('button.btn.btn-default.disabled');
  function handleBtn1() { /* Do whatever `btn1` needs */ }
  function handleButtonClick(e) {
    var id = $(this).prop('id');

    if (id == 'btn1') {
      handleBtn1();
      $disabledButtons.off('click', handleButtonClick);
    }
  }
  $disabledButtons.on('click', handleButtonClick);
});
1
Derek 16 janv. 2017 à 18:47