JS not acting on .load()-ed html

Question

I have a puzzling conundrum:

I have this JS: EDIT updated JS

 $(".img-thumb").on("click", function(){ // exhibiting the same behaviour as .click()
    thumbID = $(this).attr("id");
    console.log(thumbID);
    $(".gal-act").removeClass("gal-act");
    $(this).addClass("gal-act"); // as suggested below
});

Which is meant to act on a piece of html inserted into a page using the .load() jquery function. The puzzle is that it works on the html when it's displayed as its original file (as here: http://keithneilson.co.uk/experimental/products/Data/prod-data.html, and yes I know there are images missing, no-one is meant to see this page on its own though). As you can see from that link the code is just meant to change the left border of the thumbnail to indicate which is selected for the moment, I'm going to add in the other functionality once I've got this puzzle solved.

Here is the same html inserted as a popup in the final page (click the red box beneath the slideshow): http://keithneilson.co.uk/experimental/products/. As you can see the images now work, but if you click the thumbnails again you'll see that the script is not acting (There's no log output either).

Now, it's the same html, and the same javascript, but it isn't working. My question is why, and is there a known workaround?

Why aren't you just doing `$(this).addClass("gal-act")` on your last line rather than selecting it from the DOM again? — René Wolferink, Feb 28 '13 at 11:30

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

use the .on() or .live() instead of .click() depending on jQuery version.

Edit: more on this jquery .live('click') vs .click()

edited May 23 '17 at 10:25

Community

1
1

answered Feb 28 '13 at 11:08

Nick Andriopoulos

10,313
6
32
56

.live() is not available in jQuery 1.9. Not deprecated but removed entirely. .on() exhibits the same behaviour as .click(), ie works in the standalone page but not when loaded into another page. – mandrill Feb 28 '13 at 11:32
in older (pre-1.7) jQuery version, `.on()` does not exist, hence the recommendation for `.live()`. If you're using latest jQuery, use `.on()` – Nick Andriopoulos Feb 28 '13 at 11:33

Ankit · Accepted Answer · 2013-02-28T11:56:55.347

1

Let me answer why.

When you are using click function to bind event, it's binding the click event only on the element that are currently present in the DOM so when the ciick event got registered your html was not present in the DOM as it loaded later. So the event not got binded to your elements.

Try suggestions provided by @hexblot.

Update:

$('body').on('click', '.img-thumb', function(){
    thumbID = $(this).attr("id");
    console.log(thumbID);
    $(".gal-act").removeClass("gal-act");
    $("#"+thumbID).addClass("gal-act");
});

edited Feb 28 '13 at 11:56

answered Feb 28 '13 at 11:21

Ankit

1,867
2
21
40

So I need to recalculate the DOM once the external html is loaded? How do I do that without reloading the whole page? – mandrill Feb 28 '13 at 11:43
No you don't need to recalculate anything, you have have to change the way you are binding click handler. Use on() or live(), depending on your version of jquery, instead of click(). See other answers here. – Ankit Feb 28 '13 at 11:45
what version of jquery you are using? – Ankit Feb 28 '13 at 11:46
I'm using jquery 1.9.0, and as mentioned above .on() behaves exactly the same way as .click() and only works in the standalone page. I'm thinking that I need to register the loaded elements into the DOM once the .load() method is finished so that the events can be bound to them. Would my thinking be right? – mandrill Feb 28 '13 at 11:53
I have updated my answer, ensure that you are using .on() like what I have shown. – Ankit Feb 28 '13 at 11:57
Should be `$("body").on('click', '.img-thumb', function(){...` but otherwise that works, thank you. – mandrill Feb 28 '13 at 12:00

JS not acting on .load()-ed html

2 Answers2