Dynamically created rows of images will not trigger the click event

Question

I have a bit of jquery that makes an ajax request to a script and returns some json results. These results are then parsed and a little image gallery is created. This is then added to my form. That bit all works perfectly.... The problem I have is that I am trying to trigger an event to the images so that when you click an image I can do some more processing.... But I just cannot get the onclick to work...

If anyone has any pointers I would be very grateful.

  $('.imgSel').click(function()
{
    alert("I WORK!!!!");
});


$("#mydiv").change(function(){ 
{
var url = "ajax_pics.php";

$.ajax({
    type: "GET",
    url: url,
    error: function(data){
        console.log("could not get get pics");
    },
    success: function(data){
        console.log(data);
        var pics = jQuery.parseJSON( data );
    $("#imageResultsDiv").remove();
    var imageResults ='<label>Image</label><div id="currImg"></div>';


    imageResults += "<div style='clear:both'></div><ul>";
    imageResults += "<div id='imageResultsDiv'><ul>";
    for(var i in pics) 
    {
        imageResults +="<li>"; 
        imageResults +="<img class='imgSel' id='"+pics[i].filename+"' src='"+pics[i].image+"'  title='"+pics[i].summary+"'>"; 
        imageResults +="<br/><small>"+pics[i].title+"</small>"; 
        imageResults +="</li>";
    }
    imageResults +="</ul>";

    $('#picsplaceholder').before(imageResults);
    }
});

});

score 7 · Accepted Answer · edited May 23 '17 at 11:46

If I understood you right you are dynamically adding elements to the DOM.

In that case you can't use the standard click bindings as they only vind to elements already existing in the DOM.

Try to use on(), which is the preferred method since jQuery 1.7:

$('#mydiv').on("click", ".imgSel", function()
{
    alert("I WORK!!!!");
});

You have to use the closest static element to bind to and then specify the sub-element you want the click event to apply to. I think in your case $('#mydiv') is the closest static element.

If you happen to use an older version of jQuery use delegate() instead.
See this post for more details on the different binding methods and when they were added and who replaced which and when.

@AttikAttak: You are more than welcome. Glad you got it to work. — Nope, Aug 02 '12 at 12:02

score 1 · Answer 2 · answered Aug 02 '12 at 11:59

Francois Wahl is right. How this works is, you add an event handler on closest static "parent" element. So when the click event is triggered on any of its child elements, it propagates upto that parent element and the event handler is triggered.

When you add new elements to the DOM, no event handlers can be registered on them by jQuery. The only option is to attach the event handler on the parent element and let the event propagate up to it. So no matter how many new elements you add in the DOM, the events are triggered at the parent element.

score -1 · Answer 3 · answered Aug 02 '12 at 11:49

-1

Try to use live event: http://api.jquery.com/live/

answered Aug 02 '12 at 11:49

nez

256
2
6

Do NOT use live. It has been depricated in jQuery 1.7 for its many drawbacks. It also states that in the linked documentation. Since 1.7 `on()` is the preferred method. If you are not using jQuery 1.7 use `delegate` instead. See this post for more details: http://stackoverflow.com/questions/11148019/what-are-the-significant-differences-among-sel-bindclick-sel-click/11148053#11148053 – Nope Aug 02 '12 at 11:50

Dynamically created rows of images will not trigger the click event

3 Answers3