Why does jQuery behave differently than javascript?

Question

I'm new to jQuery and wrote the following code. Strangely, the jQuery code somehow works even after the time delay. alert() gets called onclick after the time delay. The same thing in javascirpt with .addEventListener() would give error since the element doesn't exist. Can someone explain me how and why jQuery does this?

<div id="outerId" class="outerHolder">
  <div class="innerHolder"></div>
</div>

JS Code:

$("#outerId").on("click touchstart", "#newTag", function (e) {
    alert("OK");
});

setTimeout(function() {
    var tag = '<div id="newTag">Hello World</div>';                  
    $("#outerId").append(tag);
}, 5000);

Here is a jsFiddle of the same: https://jsfiddle.net/jb6pmovb/

What do mean The same thing in javascirpt would give error? Care to show what this same thing is? — Andrew Li
– Andrew Li, Commented Nov 15, 2016 at 5:16
you've shown the jQuery code that works, and asked why the non jQuery code doesn't ... do you see a problem with that? Oh, and what you've posted wouldn't do a thing as there are no script tags in the code posted in the question — Jaromanda X
– Jaromanda X, Commented Nov 15, 2016 at 5:16
Your question makes no sense. Specifically "The same thing in javascript would give error." doesn't make sense, since jQuery is a JavaScript library. — Paul
– Paul, Commented Nov 15, 2016 at 5:16
Do you mean to ask how jQuery manages to attach event handlers for events on elements that don't exist yet? — Amadan
– Amadan, Commented Nov 15, 2016 at 5:17
That being said, I believe your confusion is caused by event delegation. If you bind an event handler to an element and then replace that element in the DOM it would not takeover event handlers bound to the old element. In the jQuery above though, nothing is bound to the element with id #newTag, instead an onclick handler is bound to #outerId, and event.target is used to determine which element within #outerId was actually clicked. It doesn't matter that the element with #newTag doesn't exist when the handler is bound, because the handler is bound to an ancestor of it. — Paul
– Paul, Commented Nov 15, 2016 at 5:18

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

My guess is that your query is about the way on() is binding to to the object. When on() is first ran, #newTag does not exist, so you might be wondering why it still triggers when appended after a delay.

This is because #outerId is the object being bound to, which does exist the time on() is called. When you append #newTag, it doesn't alter the outer binding, it simply looks over the children when it is clicked.

With regular js I assume you are using addEventListener, which requires you bind the event to the specific object. If you do try and use that directly on #newTag before it exists, it obviously won't work.

You can see by the docs for on():

selector

Type: String A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 15, 2016 at 5:20

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:30:30Z

1

If you are wondering how the click works on an element which is not there at the time of page load, then that's because you are attaching the listener on the outerDiv and using .on

Check out this for the difference between using .on and .click

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Nov 15, 2016 at 5:20

Prasanna

11.6k2 gold badges31 silver badges43 bronze badges

Collectives™ on Stack Overflow

Why does jQuery behave differently than javascript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related