on click does not work after inserting dynamic HTML with jquery

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 — valar morghulis, Mar 31 '15 at 05:25
you can also use `$(body).delegate('.className', 'click', function() {//your code goes here});` or follow this link https://api.jquery.com/delegate/ — valar morghulis, Mar 31 '15 at 05:29
check for console you might have error in your code. probably `$(body).append(
');` you are missing `' — valar morghulis, Mar 31 '15 at 05: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, Mar 31 '15 at 05:33

Rohit Arora · Accepted Answer · 2015-03-31T07:04:56.313

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 '15 at 07:04

answered Mar 31 '15 at 05:26

Rohit Arora

2,246
2
24
40

I have it there, actually I forgot to put it. Still doesnt work – idelara Mar 31 '15 at 05:29
ok , then use this click function , in replacement to that. – Rohit Arora Mar 31 '15 at 05:31
1

`.on(".divClassSelector","click",` suppose to be `.on("click",".divClassSelector",` – Norlihazmey Ghazali Mar 31 '15 at 05:32
Thank you it did work. Could you elaborate on the Update 1 of my post if possible? Thanks! – idelara Mar 31 '15 at 05:38
@NorlihazmeyGhazali , It also works. – Rohit Arora Mar 31 '15 at 05:45
@RohitArora : How you know it work?? 1st paramter should be events, not selector.. See doc here. https://api.jquery.com/on/ – Norlihazmey Ghazali Mar 31 '15 at 05:56
@NorlihazmeyGhazali Yours function will work with jquery 1.7.3+ , but mine will work on jquery 1.4.3+ . This is the difference bro. You can use any way you want . – Rohit Arora Mar 31 '15 at 06:06
@RohitArora Can you give jsfiddle link to me, wanna see how it works on v1.4.3.. Because what i see on doc, the .on() method was added at v1.7 . – Norlihazmey Ghazali Mar 31 '15 at 06:20
@NorlihazmeyGhazali Dont have much time to create a fiddle , but iwill try . Read this : https://api.jquery.com/live/ , you will get it here . Because previously it was .live() event in jquery . – Rohit Arora Mar 31 '15 at 06:27
1

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. – Norlihazmey Ghazali Mar 31 '15 at 07:03

Ghostman · Answer 2 · 2015-03-31T05:33:05.453

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 '15 at 05:33

answered Mar 31 '15 at 05:26

Ghostman

6,042
9
34
53

I have it there, actually I forgot to put it. Still doesnt work – idelara Mar 31 '15 at 05:30
did u try using `$(document).on('click', '.divClassSelector', function(){` – Ghostman Mar 31 '15 at 05:31
Thank you it did work. Could you elaborate on the Update 1 of my post if possible? Thanks! – idelara Mar 31 '15 at 05:38
@JackGal approve the answer then – Ghostman Mar 31 '15 at 05:59

on click does not work after inserting dynamic HTML with jquery

2 Answers2