jquery event functions not working properly

Question

I have a page where the contents displayed from database using jquery and ajax. There are lot of processes in the page like Adding new content and image, Editing, Deletion etc and all are using ajax. But now some of event functions like click , mouseenter are not working in the content which where displayed from the database.

for example: This is how i display images in the page

for(var i=0;i<images.length;i++)
{
$("#content").append("<img src='"+images[i]+"' class='img'  width='300' height='200' />");
}

Images are displayed properly. but when trying to do somthing on click event in images like this, its not working

 $("#content .img").on('click',function()
  {
  //here comes my process, but its not working
   }

Please help me to solve this problem.

if you're using an old version of jquery instead using .on() try using .live() for delegation — Drixson Oseña
– Drixson Oseña, Commented Oct 4, 2013 at 6:39

zdyn · Accepted Answer · 2013-10-04 06:44:57Z

3

Try:

$("#content").on("click", ".img", function() {

});

The problem is that $("#content img") creates a jQuery collection of elements that exist at the time it is run. When you start dynamically adding new elements, they don't have the event listener applied to them automatically.

What $("#content").on("click", ".img") does is provide for event delegation. So what's really happening is an event listener that is applied to $("#content") but only fired when that event comes from a descendant with a matching selector (.img in this case).

More info at http://api.jquery.com/on/.

edited Oct 4, 2013 at 6:44

answered Oct 4, 2013 at 6:38

zdyn

2,1731 gold badge16 silver badges17 bronze badges

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

2 Comments

user2765968 Over a year ago

Can you please tell me what to do in case of hiding the image like $(".img").hide();

zdyn Over a year ago

@user2765968 I'm afraid I don't understand your question. If you hide images, they won't fire a click event because there won't be anything to click.

Pascalz · Accepted Answer · 2013-10-04 06:38:45Z

0

Try like this

$(document).on('click', '#content .img',function()
{
  ...
});

answered Oct 4, 2013 at 6:38

Pascalz

2,3581 gold badge24 silver badges25 bronze badges

Comments

Shivam Chopra · Accepted Answer · 2013-10-04 06:53:28Z

0

This problem will always arise when you are trying to add some dynamic content. So,to resolve this always keep in mind some point.

All use some static element to reference the dynamic you are trying to apply event on. Example : in your case try using

$("#content").on('click', 'img', function(){ //try using this way make your code works fine.! });

answered Oct 4, 2013 at 6:53

Shivam Chopra

63910 silver badges20 bronze badges

Collectives™ on Stack Overflow

jquery event functions not working properly

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related