bind a click event to a div block generated on the fly using jquery

Question

I have a div which completely created on the fly when the page is loaded and this div is visible to the user and in firebug but when i view the page source its not available.. the content within the div changes dynamically.

im trying to bind a click event to it so when someone clicks on that div to alert a message..

i have go through almost all the suggestions but none of them work

my dynamic div

<div class="mootoo drive form2">Hello this a mootoo test</div>

Tested JQuery functions

$(document).on('click', ".mootoo", function() {
      alert("clicked");
});


 $('.mootoo').on('click',function() { 
  alert("clicked");
    });


 $('.mootoo').live('click',function() { 
  alert("clicked");
    });

Can someone please tell me what am i doing wrong?

actually i cant find the JQ code where it generates the div But im having the exact same problem with this

http://jsfiddle.net/g1sqrxg6/3/

if you see when i click it doesnt alert "chosen-choices" is the dynamically created class..

in that case i when a user selects and or clicks on that div or box i need to put an alert

possible duplicate of [Click event doesn't work on dynamically generated elements](http://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements) — Nishit Maheta, Jul 15 '15 at 07:44
do you have jQuery loaded to your page? because first one surely work. — Jai, Jul 15 '15 at 07:46
Can you create a fiddle for the issue. Regarding your dynamic content not visible in page source, page source will show only the static content. — Abhishek Prakash, Jul 15 '15 at 07:47
http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Rino Raj, Jul 15 '15 at 07:54
there are no errors, jquery is loaded fine coz when i add a click event to an input it works... let me update with a different example in a fiddle.. i tried all of those mentioned in the possible duplicate but it doesnt work.. — LiveEn, Jul 15 '15 at 07:57
1.7... i couldnt find the jqery function that puts the random content.. so i put up a fiddle with a select box problem.. actually its a the same.. http://jsfiddle.net/g1sqrxg6/3/ the click event doesnt work — LiveEn, Jul 15 '15 at 08:20
As pointed out by @Roumelis, your select.chosen-select is replaced by chosen lib. — Abhishek Prakash, Jul 15 '15 at 09:36

Roumelis George · Accepted Answer · 2015-07-15T08:58:54.537

2

Your first function

$(document).on('click', ".mootoo", function() {
      alert("clicked");
});

should work as you can see in this fiddle. So the problem is not that your div is dynamically generated.

Update:

$(document).on("click",".chosen-container", function() {
    alert("clicked");
});

Fiddle

edited Jul 15 '15 at 08:58

answered Jul 15 '15 at 07:58

Roumelis George

6,602
2
16
31

i managed to put a fiddle withe select extension.. http://jsfiddle.net/g1sqrxg6/3/ its the same problem.. when the select box is clicked doesnt alert – LiveEn Jul 15 '15 at 08:21
You are using jQuery 1.63 in your fiddle. In this version .on is not supported. – Roumelis George Jul 15 '15 at 08:43
You are using chosen.js. Your select is replaced with a div with class .chosen-container. Check my updated answer for a working solution. – Roumelis George Jul 15 '15 at 08:59

bind a click event to a div block generated on the fly using jquery

1 Answers1