CODEWITHSUNDEEP
jquery
chandola
chandola

Reputation: 125

how DOM is manipulated by jquery in this code?

Look the following jquery code:

var index = 0;
$(document).ready(
    $("p").on("click", function () {
        $("p").after($("<p>you have clicked "+(++index).toString()+" times on this text </p>"));
        $("p").first().remove();
        console.log(index);
    })
);

Initially there is only a p tag in HTML (nothing else) so I expect that the first time the user clicks on the text(initial paragraph text) you have clicked 1 times on the text will appear and subsequently the index will increase and the text will be changed for every click.. But it doesn't work in this way on first click, it puts a p tag in DOM (as I can see in chrome inspect element) but it doesn't work after that why?

Upvotes: 1

Views: 71

Answers (5)

Lee Meador
Lee Meador

Reputation: 12985

Just to add to what all the other experts are saying ...

This part runs at document load:

$("p").on("click" ...

And this part runs when they click on the <p> elements present at that time:

    $("p").after($("<p>you have clicked "+(++index).toString()+" times on this text </p>"));
    $("p").first().remove();
    console.log(index);

But you added new <p> elements and they have no click listeners.

The other answers are showing how to add the click handler function higher up the DOM hierarchy. Do it the way they describe. Then the click event 'bubbles' up from where it happened and jQuery figures out if its on the <p> and runs the handler function.

Another alternative is to give the function a name and, whenever you add a <p> then add a click listener to it. So you will reference the function inside the function.

Someone might comment on which is "better." In the one, the events go bubbline around and jQuery has to traverse the DOM looking for <p> elements. In the other, you keep adding click event listeners over and over.

There are other ways to do this that are much better. (I like just putting the count in its own <span> element and changing out that text on each click.)

Upvotes: 1

letiagoalves
letiagoalves

Reputation: 11302

Because the new DOM elements do not have the click event the first one had.

You need to use $(document).on("click", "p", function () { }); instead.

See this working demo

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55740

Cause when the event is bound , the element is still non-existent on the page..

When the script that attaches the events is executed , elements which exist on the page are given the handlers..

So when you click the first time , the click event for that element is executed, then you remove the element to which the event is bound. Now you click the p element which is a new element that was added later to the DOM .

You need to delegate the event

 $("body").on("click", "p" function () {

Upvotes: 2

jbabey
jbabey

Reputation: 46647

It does not work because you are not using the signature of .on() that utilizes event delegation. Change it to this and it should work fine:

$(document).on("click", "p", function () {

You should replace document with whatever static container is the closest container to the p tags.

Check out jqFundamentals for information about event delegation.

Upvotes: 4

tymeJV
tymeJV

Reputation: 104775

You need to use event delegation.

$(document).on("click", "p", function () {

Upvotes: 1

Related Questions