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?

Answer 1

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");
});