checkbox - Why is my click event called twice in jquery?

Question

Why is my click event fired twice in 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");
});

This is what I get in 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>?

Answer 1

If I remember correctly, I've seen this behavior on at least some browsers, where clicking the label both triggers a click on the label and on the input.

So if you ignore the events where e.target.tagName is "LABEL", you'll just get the one event. At least, that's what I get in my tests:

• Example with both events | Source
• Example filtering out the e.target.tagName = "LABEL" ones | Source