Pourquoi mon événement click est-il appelé deux fois dans jquery?

Pourquoi ma cliquez sur l'événement déclenché deux fois en jquery?

HTML

<ul class=submenu>
    <li><label for=toggle><input id=toggle type=checkbox checked>Show</label></li>
</ul>

Javascript

$("ul.submenu li:contains('Show')").on("click", function(e) {
    console.log("toggle");
    if ($(this).find("[type=checkbox]").is(":checked")) console.log("Show");
    else console.log("Hide");
});

C'est ce que j'obtiens dans la console:

toggle                     menu.js:39
Show                       menu.js:40
toggle                     menu.js:39
Hide                       menu.js:41


> $("ul.submenu li:contains('Show')")
[<li>​                                            ]
    <label for=​"toggle">​
      <input id=​"toggle" type=​"checkbox" checked>​
      "Show"
    </label>​
</li>​

source d'informationauteur shuji

  1. 25

    Si je me souviens bien, j'ai vu ce problème sur au moins certains navigateurs, où cliquant sur le label les deux déclenche un clic sur le label et sur le input.

    Donc, si vous ignorez les événements où e.target.tagName est "LABEL"il vous suffit de faire un événement. Au moins, c'est ce que je reçois dans mes tests:

  2. 3

    Je vous recommande d'utiliser le change de l'événement sur la input[type="checkbox"] qui ne sera déclenchée une fois. Donc comme une solution pour le problème ci-dessus vous pouvez effectuer les opérations suivantes:

    $("#toggle").on("change", function(e) {
  if ($(this).is(":checked"))
    console.log("toggle: Show");
  else
    console.log("toggle: Hide");
});

    https://jsfiddle.net/ssrboq3w/

    La vanille JS version à l'aide de querySelector qui n'est pas compatible avec les anciennes versions d'IE:

    document.querySelector('#toggle').addEventListener('change',function(){
  if(this.checked)
    console.log('toggle: Show');
  else
    console.log('toggle: Hide');
});

    https://jsfiddle.net/rp6vsyh6/

  3. 2

    Ce problème se produit lorsque le input balise est structurée au sein de l' label tag:

    <label for="toggle"><input id="toggle" type="checkbox" checked>Show</label>

    Si le input case est placée à l'extérieur de labelavec l'utilisation de la id et for attributs, les tirs multiples de la click événement ne se produira pas:

    <label for="toggle">Show</label>
<input id="toggle" type="checkbox" checked>