Please help with Jquery live!

[alena1347]

I am stuck at this code I am using the jquery to load a entire id which works ok without live but for some reason I need to add live, But after using it the whole document buttons fail to work please help with this.

 

$(document).ready(function(){

                                               $("#td3 a").live("click",function(e){

                                                                                                    var id=$(e.target).text();

                                                                                                    $("#td1").load("pending_approvals.php #td1",{page:id});

                                                                                                   });

                                              });

<tr>

               <td id="td3">

Enter View Limit:<input type="text" name="limit" />   Pages>>

<?php 

         for ($i = 1; $i <= $total_pages; $i++)

             {

                echo "<a href='#'>$i</a> ";

              }

?> 

 

</td>

       </tr>

Edited March 18, 2013 by alena1347

[Adam]

works ok without live but for some reason I need to add live

This doesn't sound like a great reason to me. Why are you trying to fix something that's not broken? Not to mention .live() is deprecated as of v1.7; if you're upgrading I would upgrade straight to v1.9 and use .on() instead.

 

As for the code, I can't see any issues with it. What errors are you getting in dev tools?

[alena1347]

This doesn't sound like a great reason to me. Why are you trying to fix something that's not broken? Not to mention .live() is deprecated as of v1.7; if you're upgrading I would upgrade straight to v1.9 and use .on() instead.

 

As for the code, I can't see any issues with it. What errors are you getting in dev tools?

I used .on but the buttons on that page still do not work.

[Adam]

The .on() and .live() APIs are not the same, so you'd need to show your code. Are you getting any errors though? If you are that will be far more useful!

[alena1347]

The .on() and .live() APIs are not the same, so you'd need to show your code. Are you getting any errors though? If you are that will be far more useful!

What I am trying to do is.

1. A button named decline is clicked which on click a jquery event is trigerred which puts a .load() which do not return anything.

2. After the load I need to refresh the current page which I do with .load() function. After which all the buttons stop working.

below is the code please let me know where to add the .on() so that all buttons work proper.

 

$('#decline').click(function(){

                      var dec=[];

                     $("input[name=checkbox]:checked").each(function(){dec.push($(this).val());});

                     $("#dec").load("list.php",{fors:"decline",arr:dec}) ;

                     $("#td1").load("pending_approvals.php #td1");

                                     });

 

 

Thank You!

Edited March 20, 2013 by alena1347

[haku]

Put it outside that code.

[Adam]

2. After the load I need to refresh the current page which I do with .load() function. After which all the buttons stop working.

What do you mean by 'refresh the current page' exactly? load() only loads HTML from the server into the page, nothing is refreshed. What I suspect is happening is that when you're loading HTML into the page, your binds are no longer working, because the original elements have all been replaced or simply don't exist anymore. If that's the case then live() or on() is the right way to do it, though as mentioned before, the latter should be used if you have jQuery >= v1.7.

 

The way they work is by instead of binding the event directly to the element, they use a wrapper element to bind to and wait for events to bubble up the DOM tree. Even if you haven't bound any event handlers to elements, they still emit events when interacted with; moused over, clicked, etc. That means you can change the contents of the wrapper as many times as you want, but the parent will remain listening for any events bubbling up. Once an event is received at the wrapper, jQuery compares the original target to the selectors it has registered and calls the appropriate handlers.

 

The problem with live() compared to on() is that live() binds to the document, which means events have to bubble up potentially a lot further to reach the 'wrapper element' before being handled. That's obviously going to be marginally slower, but more importantly allows for a lot more interference from other events higher in the tree that could prevent the event travelling any further up. on() allows you to specify that parent element, so you can reduce the distance the event has to bubble up and so reduce interference from other events.

 

In your case my guess is that the #decline button is within the pending_approvals.php response, and as you click decline on one item pending approval and the content is refreshed, the binds no longer work? If that's the case you need to use the DIV you're loading pending_approvals.php into as the parent element, and let the #decline.click event bubble up:

$('#td1').on('click', '#decline', function() {
    // handle here
});

[alena1347]

 

What do you mean by 'refresh the current page' exactly? load() only loads HTML from the server into the page, nothing is refreshed. What I suspect is happening is that when you're loading HTML into the page, your binds are no longer working, because the original elements have all been replaced or simply don't exist anymore. If that's the case then live() or on() is the right way to do it, though as mentioned before, the latter should be used if you have jQuery >= v1.7.

 

The way they work is by instead of binding the event directly to the element, they use a wrapper element to bind to and wait for events to bubble up the DOM tree. Even if you haven't bound any event handlers to elements, they still emit events when interacted with; moused over, clicked, etc. That means you can change the contents of the wrapper as many times as you want, but the parent will remain listening for any events bubbling up. Once an event is received at the wrapper, jQuery compares the original target to the selectors it has registered and calls the appropriate handlers.

 

The problem with live() compared to on() is that live() binds to the document, which means events have to bubble up potentially a lot further to reach the 'wrapper element' before being handled. That's obviously going to be marginally slower, but more importantly allows for a lot more interference from other events higher in the tree that could prevent the event travelling any further up. on() allows you to specify that parent element, so you can reduce the distance the event has to bubble up and so reduce interference from other events.

 

In your case my guess is that the #decline button is within the pending_approvals.php response, and as you click decline on one item pending approval and the content is refreshed, the binds no longer work? If that's the case you need to use the DIV you're loading pending_approvals.php into as the parent element, and let the #decline.click event bubble up:

$('#td1').on('click', '#decline', function() {
    // handle here
});

OK thank you got it the buttons work fine now thank you.