Question

I have a little problem with my click event.

I have an AJAX function that retrieves a JSON object. It works great and my pictures appear as I want.

My problem is that every picture that appears to have a click function in which I will call a function. But it does not work.

Here is what my code looks like:

    $.getJSON('url-to-my.fle.php', function( obj ){

    for( var i = 0; i < obj.length; i++ ){

        var value = obj[ i ];
        FOO.bar.app.img.prototype.renderThumbs( myWindow, value['fileName'], value['width'], value['height'] );
    }
});

The code above works, my funktion renderThumbs

FOO.bar.app.img.prototype.renderThumbs = function( myWindow, imgURL, imgWidth, imgHeight){
    var images = "";

    images = '<div class="imgBox"><a href="#"><img src="images/thumbs/'+ imgURL +'" alt="" /></a></div>';

    $('.content', myWindow).append(images).hide().fadeIn(800);
    var that = this;

    console.log($(images).find('img'));
    var img = $(images).find('img');

    $(img).live('click', function() {
        console.log('click');
        that.getImg(imgURL, imgWidth, imgHeight);
    });
};

I am getting no errors in firebug, nothing happens when I click on the images. I tested with. click (); .bind () and as you can see in my code also .live() and it is the same result with all eventshandlers.

Some tips on how I solve this?

I can not send an ID number in my img tag, then it becomes wrong when I have two galleries running.

Answer 1

It looks like your error is that images is a string, not the actual image elements you inserted into the DOM. Simplified code:

images = '<div><img /></div>';
$('.content').append(images);   
var img = $(images).find('img');

Basically, you’re creating the DOM elements twice: once in append and once in the jquery selector where you call find. Changing it to this should work:

images = $('<div class="imgBox"><a href="#"><img src="images/thumbs/'+ imgURL +'" alt="" /></a></div>';);

Because now you are creating the DOM elements only once.