0

This block of JavaScript binds and then executes a custom event.

$("#a").on("stuff", "#d",
function() {
  alert("hi");
});
$("#d").trigger("stuff");

With this HTML, the event should not trigger, but it does

<div id="a">
    <div id="b"/>
    <div id="c"/>
</div>
<div id="d">
</div>

However, with this HTML it works correctly. The event does not trigger.

<div id="a">
    <div id="b"></div>
    <div id="c"></div>
</div>
<div id="d">
</div>

The difference appears to be the use of XHTML.

This is posted in a couple of fiddles.

This one should not trigger the alert (in Chrome), but it does: http://jsfiddle.net/sZfs3/33/

This one works as expected: http://jsfiddle.net/sZfs3/34/

I've tried various permutations, using classes instead of id, for example, and get similar problems. The document is XHTML, and I've tried strict and transitional. Does anyone a know a reason that this would be a problem?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user3736697
  • 1
  • 1
  • `d` is not descendant of `a`, so event will not trigger – Satpal Jun 13 '14 at 07:01
  • The event should not trigger, that is the problem. In the first example, it does trigger. – user3736697 Jun 13 '14 at 07:03
  • Doesn't fire the event for me when clicking on `#d`: http://jsfiddle.net/sZfs3/37/ - which is correct behaviour. I don't see how it possibly could, given that `#d` is not a descendant of `#a`. Check your code to see if you've got some other event hooks which are being picked up. – Rory McCrossan Jun 13 '14 at 07:04
  • 1
    The problem is the /> in the first chunk of HTML. That causes it to trigger. Your fiddle removes that. The issue is that XHTML seems to break this. – user3736697 Jun 13 '14 at 07:05
  • @user3736697 good catch, I thought the `/>` was just for brevity. OP, you cannot self-close `div` tags. – Rory McCrossan Jun 13 '14 at 07:06
  • Self closing div tags should be valid in XHTML. http://stackoverflow.com/questions/7971716/is-it-ok-to-use-a-self-closing-div-tag – user3736697 Jun 13 '14 at 07:08
  • Note that the content of the file does not determine if it get parsed as XHTML or as HTML; only the file type does. So the fiddles are HTML, even though you do give them XHTML doctypes. – Mr Lister Jun 15 '14 at 19:50

1 Answers1

1

As far as your first example is concerned. browser renders your HTML as

<div id="a">
    <div id="b">
        <div id="c"></div>
        <div id="d"></div>
    </div>
</div>

So d becomes a descendant of a, thus event is triggered. Your problems lies in the line

<div id="b"/>

Note div is not a self-closing element. Browser closes a div tag when it encounters </div>

Satpal
  • 132,252
  • 13
  • 159
  • 168
  • That would certainly explain it. So you would say the answer to this question is wrong? http://stackoverflow.com/questions/7971716/is-it-ok-to-use-a-self-closing-div-tag Well, interestingly, they do comment in there that jQuery does sometimes break on self-closing tags. – user3736697 Jun 13 '14 at 07:12
  • @user3736697 It is not valid XHTML, so yes, the answer to the other question is wrong. It is, however, well-formed xml, which means that the browser would treat it like you expected if the file was a real XHTML file (with an .xhtml extension). With an .html extension, the file is HTML, no matter the contents, and it gets parsed as Satpal shows. – Mr Lister Jun 15 '14 at 19:47