Execute Jquery on div in ajax loaded contents

Question

I have a page called forms.php with a javascript included in its head and a div called fadeinContents

i used Ajax to load part of a file called #sections1 into this div which works quite well

But i need to execute some Jquery on the loaded contents in the fadeinContents when they are clicked. Ive read other post but couldn't understand them well..

Here are my files

forms.php

<html>
  <head>
    <script type="text/javascript" src="scripts/scripts.js"></script>
    <script type="text/javascript" src="scripts/login.js"></script>
  </head>
  <body>
   <div class="login_link">login</div>
   <div class="signup_link">signup</div>

    <div class="fadeinContents">
        <!--Loaded contents goes here -->
    </div>
</html>

Here's my Jquery

$(document).ready(function(e) {
    $('#fadeinContents').load('forms.php #sections1');

    $('.login_link').click(function(e) {
        $('#fadeinContents').load('forms.php #sections1');
    });

    $('.signup_link').click(function(e) {   
        $('#fadeinContents').load('forms.php #sections2');
    });

    $('.recoverPassword').click(function(e) {
        $('#fadeinContents').load('forms.php #sections3');                     
    });

});

Loaded File containing

<div class="sections1">
    <div class="signup">
          <!-- Signup Forms Here -->
    </div>
</div>

<div class="sections2">
    <div class="login">
          <!-- loginForms Here -->
    </div>
</div>
<div class="sections3">
    <div class="recoverPassword">
          <!-- recover form Here -->
    </div>
</div>

My problem is that the Recover password click function is not working because it was loaded, Please how can i make this work?
thnx in advance..

Answer 1

then you should bind that event differently. try it like this

  $('.fadeinContents').delegate('.login_link', 'click', function(e) {
       $('#fadeinContents').load('forms.php #sections3');                     
  });

and so on for the rest of them.

This means that the click event is binded on the .fadeinContents but when triggered, it checks if the target is a .login_link and if so it will triggers the given callback. So delegating the event handler to a higher node will ensure that no matter when the content of the node will load/change or how many elements you have, if they match the criteria the event handler will trigger.

Delegating events is a bit more memory efficient as well. If you have for example one hundred cells you want to add click events to, doing a $(".cell").click( will attach a event listener on every one of them. Delegating it to the body for example with $("body").delegate('.cell', 'click', will only attach one event (and then do some looping and checking there, that's true) but you'll end up with only one event listener and it won't matter how many nodes you later add or remove. they will trigger that click event

Execute Jquery on div in ajax loaded contents

Question

1 answers

solution1
1 ACCPTED 2013-04-11 16:50:57

Execute Jquery on div in ajax loaded contents

Question

1 answers

solution1 1 ACCPTED 2013-04-11 16:50:57

solution1
1 ACCPTED 2013-04-11 16:50:57