adding onclick event to dynamically generated array of element jquery

Question

I have a dynamically generated thumbnail images on the left side of my popup and on click of the image i want that image to be displayed on the right hand side.

I am using the below code:

    $.ajax({  
                    type: "POST",
                    url:  "/buildyourholiday/placeimages",
                    data: "srcid="+cityid,
                    success: function(data){
                        var objsrc = jQuery.parseJSON(data);
                        var src="";
                        $(".photoright").append().empty();
                        $.each(objsrc, function(index, obsrc){
                            src += '<ul>'+
                                '<li><a href="#"><img id="citythumb" onclick="sliderimage(this)" src="/images/city/thumbs/'+obsrc.img_filename+'" width="100" height="100"></a></li>'+
                                '</ul>';
                        });
                        $(".photoright").append(src);
                        function sliderimage(image)
{
    alert("sdf");
    alert(image);
}
                    }
                });

When i firebug it i get sliderimage is not a function. When i use the onclick event after append i get only the first image, but there are multiple images. I want the onclick to work on the click of any image. How to go about it?

Thanks,

please make alert using parameter of sliderimage function and tell whether it works for all images — suresh gopal
– suresh gopal, Commented Oct 3, 2012 at 8:06

webdeveloper · Accepted Answer · 2012-10-03 08:03:45Z

1

id="citythumb" must be unique, use class, like class="citythumb"

$(".photoright").on('click', 'img', function(e){
   e.preventDefault(); // for link
   alert(this);
});

when you change id attribute, you could also replace img with .citythumb

answered Oct 3, 2012 at 8:03

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

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

Comments

Sushanth -- · Accepted Answer · 2012-10-03 08:05:46Z

0

Try event delegation approach here where in the events are associated to the elements ancestor ..

By doing so because of bubbling effect the click event will be associated to the image element in such cases...

$(".photoright").on('click', 'img', function(){
   alert(this);
});

Make sure the id in your document is unique.

So instead of id="citythumb" declare class="citythumb"

answered Oct 3, 2012 at 8:05

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

Murali Murugesan · Accepted Answer · 2012-10-03 08:10:58Z

0

Please move the sliderimage() function outside of Ajax call

 $.ajax({  
 });

 function sliderimage(image){     
   alert("sdf");
   alert(image);
 }

answered Oct 3, 2012 at 8:10

Murali Murugesan

22.6k18 gold badges76 silver badges123 bronze badges

Collectives™ on Stack Overflow

adding onclick event to dynamically generated array of element jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related