After loading html for a div with jQuery, existing codes/functions doesn't work for loaded content

Question

Maybe you understood from the title however here I go:

I have a file, from that file I load some other data from a php file:

File 1 html file

<html>
     <head>
      <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript">
          $(function() {
               $('#content').load('source.php');

               $("#link").click(function() {
                       alert('Message1!');
                       return false;
               });
          });
      </script>
     </head>

     <body>
           <div id="content"></div>
     </body>
</html>

File source.php

<?php

for($i=1;$i<=10;$i++) {

     echo '<a href="#" id="link">Link '.$i.'</a>';

}

?>

After the content is loaded from the php file now this code

$("#link").click(function() {
        alert('Message1!');
        return false;
});

doesn't work for loaded content(links).

I need just an explanation how this DOM works, why loaded content can't interact with active functions/codes?

Nicola Peluchetti · Accepted Answer · 2011-11-28 10:53:20Z

3

You should use live() or delegate() if you are using jQuery < 1.7

$("#link").live('click', function() {
        alert('Message1!');
        return false;
});

$("body").delegate('#link', 'click', function() {
        alert('Message1!');
        return false;
});

or use on() if you are using jqQuery > 1.7

$("body").on('click', '#link', function() {
        alert('Message1!');
        return false;
});

To handle events to DOM objects that are added after page load.

Remember that id should be unique on a page this is important. You could do:

<?php

for($i=1;$i<=10;$i++) {

     echo '<a href="#" class="addedLinks" id="link'.$i.'">Link '.$i.'</a>';

}

?>

and then use the class a selector

edited Nov 28, 2011 at 10:53

answered Nov 28, 2011 at 10:48

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

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

Comments

LostMohican · Accepted Answer · 2011-11-28 11:16:06Z

2

you just have to use live instead of click for example

$("#link").live('click', function() {
        alert('Message1!');
        return false;
});

EDIT :

I learned just now that it is deprecated since JQuery 1.7 so now we have to use .on() function like :

$("#link ").on("click", function(event){
    alert('Message1!');
    return false;
});

http://api.jquery.com/live/

http://api.jquery.com/on/

edited Nov 28, 2011 at 11:16

answered Nov 28, 2011 at 10:48

LostMohican

3,1447 gold badges33 silver badges42 bronze badges

2 Comments

simultsop Over a year ago

Thanks man, but the live method got deprecated on jQuery 1.7. Thanks also for the link that you attached :)

LostMohican Over a year ago

@Ghostology thanks for the heads up, it seems that now it is jquery .on() function which has semantically more meaning than .live()

Nicola Peluchetti · Accepted Answer · 2011-11-28 11:36:47Z

0

One possible reason is becouse the ID should be unique for your elements in your page, but you are creating 10 of them:

for($i=1;$i<=10;$i++) {
    echo '<a href="#" id="link">Link '.$i.'</a>';
}

So add an index to the id for each element or make it class=link instead.

edited Nov 28, 2011 at 11:36

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

answered Nov 28, 2011 at 10:48

Mahmoud Gamal

80.3k18 gold badges143 silver badges168 bronze badges

4 Comments

simultsop Over a year ago

But it must work for the first link, when I load content it doesn't work in the first link neither.

Mahmoud Gamal Over a year ago

I am not sure about this but i think it won't work at all test it again, and look at the other answers in this page that are about changing the click event will solve your problem or not

simultsop Over a year ago

Yes MGA I tested your way and it worked on the first then. The .live was the solution however thank you too...

Mahmoud Gamal Over a year ago

Sorry @Ghostology, I was trying to help but i wrote that becouse it is recommended to have a unique ID for each column in your page.

Collectives™ on Stack Overflow

After loading html for a div with jQuery, existing codes/functions doesn't work for loaded content

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related