Problem with jQuery click

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.

AFAIK(I may be wrong!) the code should work, can you try posting a the code somewhere like in jsfiddle.net so that we can try..? — NikhilWanpal
– NikhilWanpal, Commented Mar 15, 2011 at 12:42

David Fullerton · Accepted Answer · 2011-03-15 12:47:02Z

2

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.

answered Mar 15, 2011 at 12:47

David Fullerton

3,24429 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

justkt · Accepted Answer · 2011-03-15 12:46:57Z

1

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.

answered Mar 15, 2011 at 12:46

justkt

14.8k9 gold badges45 silver badges62 bronze badges

Comments

Mark Schultheiss · Accepted Answer · 2011-03-15 12:50:01Z

0

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?

answered Mar 15, 2011 at 12:50

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

1 Comment

Mark Schultheiss Over a year ago

not sure what your "getImg()" is about, but you can work that part out.

Collectives™ on Stack Overflow

Problem with jQuery click

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related