Problem with jQuery click

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'开发者_如何学Go], 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.

---

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.

---

You are doing work on the jQuery object that is created from the string images, not on the DOM object appended under the div with class content. Try:

// use last-child to get latest added div
console.log($(".content:last-child").find('img')); 
var img = $(".content:last-child").find('img');

Also note that when using live you only have to set it up once, perhaps towards the start of your ready. You can use the selector .content img to get all img tags in the .content div. If content contains other images you don't want to hvae that click act on, try .imgBox img perhaps.

---

If you change this part:

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

and make it be (outside your function):

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

OR use delegate and put it OUTSIDE your function

 $('.imgBox').delegate('img','click', function() {        
      console.log('click');
     $(this).getImg(imgURL, imgWidth, imgHeight);
 });

to capture the img element directly?