Binding Click event to dynamically generated div

Question

So im trying to create a dynamic image gallery. And each image created would have a div on top for users to click on. Im unable to bind a click event to the div

The Code

$(document).ready(function()
{
    if()
    {

    }
    else
    {
        var divImgContainer =  '<div id="imgContainer">';
        var divInfo         = '<div id="info">';
        var divDetails      = '<div id="details">';
        var divImage        = '<div id="image">';
        var divVote         = '<div id ="click">';
        for(i=0; i<$ImageArray.length; i++)
        {
             document.getElementById("container").innerHTML += divImgContainer+divInfo+divDetails+'Caption</div>'+divVote+'</div></div>'+divImage+'<a href="img/'+$ImageArray[i].link +'"><img src="'+$ImageArray[i].thumb+'" /></a></div></div>';
         }
        $('#click').click(function()
        {
            alert("click");
        });
    }
});

Googling gave two popular answers one is $('#click').click(function() and the other is $('#click').live(click,function() both of which does not work.

Is there any specific way to bind click events for dynamically generated div?

If you're using jQuery, why are you messing around with innerHTML? Why not just use jQuery to create the elements in the first place? — robertc
– robertc, Commented Feb 1, 2013 at 12:19

w3jimmy · Accepted Answer · 2013-02-01 12:26:54Z

2

first of all, do not create multiple divs with the same IDs

assuming element id 'click' has class 'vote' and that you want to click on any div with the class 'vote', try this:

$('#container').on('click', '.vote', function(e){
    alert("click");
});

answered Feb 1, 2013 at 12:26

w3jimmy

71210 silver badges21 bronze badges

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

4 Comments

de-bugged Over a year ago

Thnx that worked. Also any other alternative to creating multiple div with same ID, when creating image gallery?

w3jimmy Over a year ago

you can create a variable count and increase it on every loop, then on each line do something like this: var divDetails = '<div class="details" id="details-'+count+'">';

de-bugged Over a year ago

Yes i was planning to do tat. Since i have to create click event for each div, number of event i have to write also increases.

robertc Over a year ago

@de-bugged It shouldn't, the code in this answer will handle click events for all the div.vote in #container.

Anthony Grist · Accepted Answer · 2013-02-01 12:14:17Z

To start, the .live() method was deprecated in jQuery 1.7 and removed in jQuery 1.9, you shouldn't be using that.

You're creating the elements with JavaScript, but you're doing it at page load time, and before you (attempt to) bind the event handler, so that shouldn't be an issue.

However, the problem might be that you're doing this:

... + divVote+'</div>...

That opens the <div id="click"> element, then immediately ends it, so it doesn't appear to have any content. If it has no content then it's going to be difficult for you to actually click on it.

adiga · Accepted Answer · 2014-11-21 08:03:11Z

0

Put

$('#click').click(function(){
     alert("click");
});

outside of the

$(document).ready(function(){   });

and if it doesn't work, then try with

$('#click').live(click,function()

it might help you

edited Nov 21, 2014 at 8:03

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Feb 1, 2013 at 12:15

Rohan Patil

1,9731 gold badge23 silver badges36 bronze badges

1 Comment

de-bugged Over a year ago

$('#click').click(function() Outside document.ready function also has no result and using `'live' throws error

Collectives™ on Stack Overflow

Binding Click event to dynamically generated div

3 Answers 3

4 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Related