每次执行div时如何处理div图像单击事件

Question

function first(Objs) {
    var imgid= Objs;
    secondMethod(imgid);
    $('#imags_'+imgid.id).one('click', function(e) {
        alert(imgid.id)
    });    
}

function secondmethod(imgid) {
    var boxText = document.createElement("div");
    boxText.id="imags_"+imgid.id;
    boxText.innerHTML = '<div id="content" >' + '<img src=\"image.png\" width=\"50px\" height=\"50px\" id ="\images_id\" />' + '</div>';         
}

• I refreshing(executing) first method every 10 seconds( Objs.id=1 ) .
• So its two methods executed every 10 secs,
• Example after 3 refreshes(ie 3 times executes), then when I click image I got 3 time imageid(ie alert output is 1).
• how to get only one output when i clicked image with last executed object id.
• please help me from this problem.

Answer 1

Give the image a class:

boxText.innerHTML = '<div id="content" >'+        
    '<img src=\"image.png\" width=\"50px\" height=\"50px\" class ="\images_id\" />'+
    '</div>';

And use a delegated event:

$(document).on('click', '.images_id', function() {
    alert(this.id)
});

Also, your example doesn't show it but I assume boxText is appended to the DOM at some point?