Take the 2-minute tour ×

I have a problem with the jQuery's live() function.

I'm creating the shopping basket with PHP and make a json call to the php script to add specific item to the basket. Rather than re-binding the click to the button ( tag) I've decided to use live(), however it doesn't seem to like it.

Here's my call:

if ($('.add_to_basket').length > 0) {
    $('.add_to_basket').live('click', function() {
        var button = $(this);
        var id = $(this).attr("rel");
        $.getJSON("/basket/action/add/id/" + id, function(data) {
            if (!data.error) {
                button.text('Remove from the basket');
        return false;

Any idea what I might be doing wrong?

I've checked with firebug and it seem to post the request to only /basket/action/add - without id bit.

share|improve this question
it doesn't seem to like it is not a problem description. Please explain more precisely what is the expected result, the actual result and how this actual result differs than the expected result. In case you are getting an error provide the full message of this error. As this is an AJAX question providing the exact HTTP trace input/output you are seeing in FireBug might also be helpful. –  Darin Dimitrov Apr 4 '11 at 7:39
What's it doing or not doing? –  deceze Apr 4 '11 at 7:39
Did you run the code inside the $(document).ready() ? –  Corneliu Apr 4 '11 at 7:48
Yes- it's inside the $(document).ready() –  user398341 Apr 4 '11 at 7:56
Also - no warnings / no errors in the firebug - but as mentioned above - the POST seem to be sent to the incomplete url - it cuts off the id parameter. –  user398341 Apr 4 '11 at 8:06
show 7 more comments

3 Answers

The whole idea of using live() is to register a function on the occurrence of an event (eg. click) on a set of elements whether they exist or not at the time of creation of the function.

Adding ($('.add_to_basket').length > 0) will check whether this particular set of elements exist or not. This is counter productive as per my description above. So, either:

  1. Remove ($('.add_to_basket').length > 0) and this should work for all .add_to_basket elements
  2. Change $('.add_to_basket').live('click', function() {...}); to $('.add_to_basket').click(function() {...}); and wrap it around with a $(document).ready() to ensure that all DOM elements have loaded when the function is registered to the click.

Hope this makes sense.


share|improve this answer
Thanks Sumit - I've already solved the problem - please see the comment above. –  user398341 Apr 4 '11 at 10:24
add comment

Try removing the "length" check, I bet it's interfering with the .live() function.

share|improve this answer
yeah, what is the length check for anyway? I saw many people using that, but am still wondering why do we need it? –  Phelios Apr 4 '11 at 7:59
I don't think it is interfering with the .live(), but it is useless anyway –  Corneliu Apr 4 '11 at 8:01
I've tried it before - but it didn't change anything - it's only checking whether the element has been found on the page. –  user398341 Apr 4 '11 at 8:05
So, why do you have it in the first place, if it didn't change anything? :) –  Corneliu Apr 4 '11 at 8:11
@user This script won't throw any errors if the .add_to_basket element doesn't exist. Also, only attaching the event to elements that already exist kinda defeats the purpose of .live event handling. You can safely get rid of the .length check here. –  deceze Apr 4 '11 at 8:56
show 1 more comment

change $.getJSON("/basket/action/add/id/" + id, function(data) {}) to $.getJSON("/basket/action/add/id/" ,{ pid : id}, function(data) {})

share|improve this answer
add comment

Your Answer


