jQuery: Later added code via load() is ignored

Question

I have a function like this:

$(".link").click(function (){ ... }

Works well.

Now i use $("#new").load("test.htm"); and this html file contains something like

<a href="#" class="link" data-name="foo">Hello</a>

The link appears but all clicks on it will be ignored.

I'm sure this has something to do with later added content into the DOM or something.

I've found this statement here but don't know if it applies to my problem:

Because you are inserting the content AFTER the DOM has been fully loaded, you have to use .on("click",function(){}) to achieve your click functionality because at the time you are binding them they are not available in the DOM !

How can i fix that? Thank you!

Well, did you try following the suggestion you found? What was the result? — Nathan Tuggy, Mar 08 '15 at 00:29

score 1 · Accepted Answer · answered Mar 08 '15 at 00:35

1

When you $(".link").click(function (){ ... }, what you are doing is selecting all elements currently in the document and adding a click event to them. You need to use this in order to do what you want.

answered Mar 08 '15 at 00:35

firefoxuser_1

1,793
13
22

score 0 · Answer 2 · answered Mar 08 '15 at 00:36

0

Replace

$(".link").click(function (){ ... }

with

$("body").on("click", ".link", function (){ ... });

answered Mar 08 '15 at 00:36

Matthew

639
5
11

You really ought to explain. The idea here is to teach, not just to write code for people. – jfriend00 Mar 08 '15 at 00:39

jQuery: Later added code via load() is ignored

2 Answers2