jquery events doesn't work for appended elements

Question

I have this site here

As you can see there is a tiny image slider for "Images" and "Web Templates" tabs where the images are sliding from right to left, then disappears and then it appears at the very end of the parent element (an <tr> in my case).

If you hover over the small images you can see it's preview on the left.

So far so good.

But if you wait until the first images comes again, the hover event doesn't work anymore.

It is possible that jquery can't see that new appended elements at the end of the <tr> tag?

Please post the relevant code here and don't make us visit another site and wade through the source. Even better, post an example on jsfiddle.net. — j08691, Jun 01 '12 at 20:04
This FAQ section and the section before it contain the answer to this question. http://docs.jquery.com/Frequently_Asked_Questions#Why_doesn.27t_an_event_work_on_a_new_element_I.27ve_created.3F — Kevin B, Jun 01 '12 at 20:07

score 13 · Accepted Answer · edited May 01 '15 at 16:38

The way you are binding your events will not work for dynamically added elements. In preview_script.js you have:

$(".box_body img").hover(function(){

This will add eventhandlers to all img tags with class "box_body", but ones that are appended later will NOT get the event.

Try this:

$(document).on("hover", ".box_body img", function() {..});

This will add the event to document, and only fire it if the eventtarget is img with class = "box_body". Since events propagate up this should work as long as nothing in between stops it before it reaches document (by calling "event.stopPropagation()")

If you know the PARENT of ".box_body img" you can replace document with that, this will work a little better as you don't have to wait for the event to propagate up to document.

Note that you can accomplish the same thing using delegate (if on is not available):

$(document).delegate(".box_body img", "hover", function() {..});

score 2 · Answer 2 · answered Jun 01 '12 at 20:16

2

You will want to use the .live() function of jQuery in order to attach event handlers to elements that will be created in the future. Here's the doc: http://api.jquery.com/live/ here's usage:

$(".dynamicButtons").live("hover", function() {
    //do stuffs
});

answered Jun 01 '12 at 20:16

solidau

4,021
3
24
45

oh my, I haven't revisited the doc in a while - looks like they changed it to .on() – solidau Jun 01 '12 at 20:18
`$.live` is depreciated now, try using `$.on` instead. – Prasenjit Kumar Nag Jun 01 '12 at 20:27

score 2 · Answer 3 · edited May 23 '17 at 12:31

2

In your script.js change file here http://web-art.netau.net/script.js

$(".box_body img").hover(function(){
            var src=$(this).attr("src");
            var target=$(this).parents("table").attr("id").split("_").pop();
            $("#preview_"+target).attr({src:src});
})

line 112 to 116 to the following

$(document).on('mouseenter',".box_body img",function(){
        var src=$(this).attr("src");
        var target=$(this).parents("table").attr("id").split("_").pop();
        $("#preview_"+target).attr({src:src});
});

The reason behind this has been answered many times in SO. Search and find a good answer. Like

Event binding on dynamically created elements?

In jQuery, how to attach events to dynamic html elements?

jquery binding events to dynamically loaded html elements

edited May 23 '17 at 12:31

Community

1
1

answered Jun 01 '12 at 20:22

Prasenjit Kumar Nag

13,391
3
45
57

Thank you for your time.Instead of "on" I use "delegate" which is good so far. – Ionel Lupu Jun 01 '12 at 20:27
`$.delegate` is just a wrapper for `$.on` now. Check here https://github.com/jquery/jquery/blob/master/src/event.js#L996 – Prasenjit Kumar Nag Jun 01 '12 at 20:31
you are perfectly right.This means "on" is better because it's shorter. – Ionel Lupu Jun 01 '12 at 20:43

score 0 · Answer 4 · answered Jun 01 '12 at 20:21

Some code there will be usefull.

Are You deleting items from begining, and then inserting them at the end of slider?

If answer is "yes", You should use

$('selector').delegate('subselector', 'hover', function() {
    //your code there
});

instead of

$('selector subselector').hover( function() {
    //your code there
});

Please check http://api.jquery.com/delegate/ for more informations.

score 0 · Answer 5 · answered Jun 01 '12 at 20:21

0

I highly suggest you to use livequery which will help you get along with newly added elements in you javascript. An example of use would be:

 $('.elementAdded').livequery('event',function(){
    //do stuff
 })

I had several issues using .on() as it will bound events to items only once (after document ready for example).

Hope it helps.

answered Jun 01 '12 at 20:21

KoU_warch

2,160
1
25
46

I don't want to use any extra libraries – Ionel Lupu Jun 01 '12 at 20:28

jquery events doesn't work for appended elements

5 Answers5