on click does not work after inserting dynamic HTML with jquery [duplicate]

Question

I am trying to achieve code reusability by whenever a div is clicked, it gives out the div's numberDiv attribute. It works on the first default div that has a class divClassSelector, but I have some other js code that whenever you press the button "+1 Div", inserts another div. Then, when I try to alert the newly created div's numberDiv attribute, it does not work. I am assuming that it is because the newly created div did not exist in the DOM when the page was first loaded, therefore it cannot find the new div. I could be wrong though.

Does anybody know a workaround to this issue? Any help is much appreciated.

Here's my code:

//HTML
...
<body>
    <div class="divClassSelector" numberDiv="1"></div>
    <button id="plusOneDiv">+1 Div</button>
</body>
...

//My JS:

//Code to alert the div's numberDiv attribute value
$(".divClassSelector").on("click", function(){
    var numberDiv = $(this).attr("numberDiv");
    alert(numberDiv);
});

//Code to insert another div
var count = 2;
$("#plusOneDiv").click(function(){
    $(body).append(<div class="divClassSelector" numberDiv="'+count+'">');
    count++;
});

Thank you for your help in advance and cheers!

UPDATE 1:

Does anyone know how to instead on clicking the div, trigger an event that is triggered by having the "focus" on a form input field, that is, when you click on it and are interacting with it. I tried by using the "focus" method, but it kept alerting the same thing over and over, until I closed the tab, then I could escape from the alert infinite loop. Thanks!

use data-div-no="count" for div attribute its html standard — Sahil Sharma
– Sahil Sharma, Commented Mar 31, 2015 at 5:25
you can also use $(body).delegate('.className', 'click', function() {//your code goes here}); or follow this link api.jquery.com/delegate — Sahil Sharma
– Sahil Sharma, Commented Mar 31, 2015 at 5:29
check for console you might have error in your code. probably $(body).append(<div class="divClassSelector" numberDiv="'+count+'">'); you are missing '<div — Sahil Sharma
– Sahil Sharma, Commented Mar 31, 2015 at 5:31
Don't use alert() inside a focus() handler. Your focus handler fires, which pops up the alert, which fires the blur() event. You close the alert, which fires the focus() event, which pops up the alert, and you have an infinite loop. If you simply avoid using an alert(), binding events to focus() will work fine. — Christian
– Christian, Commented Mar 31, 2015 at 5:33

Rohit Arora · Accepted Answer · 2015-03-31 07:04:56Z

1

First of all add this '$' to your code: --$(this).attr("numberDiv");--

$(".divClassSelector").on("click", function(){
var numberDiv = $(this).attr("numberDiv");
alert(numberDiv);
});

Also change your click function to

$(document).on("click",".divClassSelector", function(){
var numberDiv = $(this).attr("numberDiv");
alert(numberDiv);
});

edited Mar 31, 2015 at 7:04

answered Mar 31, 2015 at 5:26

Rohit Arora

2,2622 gold badges28 silver badges40 bronze badges

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

10 Comments

idelara Over a year ago

I have it there, actually I forgot to put it. Still doesnt work

Rohit Arora Over a year ago

ok , then use this click function , in replacement to that.

Norlihazmey Ghazali Over a year ago

.on(".divClassSelector","click", suppose to be .on("click",".divClassSelector",

idelara Over a year ago

Thank you it did work. Could you elaborate on the Update 1 of my post if possible? Thanks!

Norlihazmey Ghazali Over a year ago

Yes i know that one. And selector that you make above is .delegate() way, not the .on() way. New comers will confuses, and always use new version of code since the older will deprecated.

|

Ghostman · Accepted Answer · 2015-03-31 05:33:05Z

0

$(document).on('click', '.divClassSelector', function(){
var numberDiv = $(this).attr("numberDiv");
alert(numberDiv);
});

or

$('body').on('click', '.divClassSelector', function () {...})

you forgot $

var numberDiv = (this).attr("numberDiv");

to

 var numberDiv = $(this).attr("numberDiv");

edited Mar 31, 2015 at 5:33

answered Mar 31, 2015 at 5:26

Ghostman

6,1129 gold badges36 silver badges53 bronze badges

4 Comments

idelara Over a year ago

I have it there, actually I forgot to put it. Still doesnt work

Ghostman Over a year ago

did u try using $(document).on('click', '.divClassSelector', function(){

idelara Over a year ago

Thank you it did work. Could you elaborate on the Update 1 of my post if possible? Thanks!

Ghostman Over a year ago

@JackGal approve the answer then

Collectives™ on Stack Overflow

on click does not work after inserting dynamic HTML with jquery [duplicate]

2 Answers 2

10 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

4 Comments

Linked

Related