Question

OK, so, I use livequery() to bind a function to the click event of all links of class ‘ajaxLink’. The function fires perfectly…once. After the first successful ajax call on a click, subsequent clicks don’t fire the ajax, which means (I’m guessing) they aren’t being bound by the livequery() code anymore.

I saw where others who had a similar issue moved their code outside the ready() function, so I tried that, to no avail (same results).

$('a.ajaxLink').livequery('click', function(e) {
  e.preventDefault();
  var target = $(this).attr('href') + '&ajax=y';
  var x = $(this).html();

  $.ajax({
   type: 'POST',
   url: target,
   //data: str,
   success: function(msg) {
    $('#mainPanel').slideUp(500, function() {
     $(this).html(msg).slideDown(1000);
    });
   }
  });
 })

Let me know if you need more detail. Thank you in advance for your help! This site is excellent.

Answer 1

.livequery() has issues depending on which version and some special DOM cases. However, you can ignore that problem…since you’re doing something that works off events, you can use the built-it .live() here (available in jQuery 1.3+), like this:

$('a.ajaxLink').live('click', function(e) {
  e.preventDefault();

  $.ajax({
    type: 'POST',
    url: $(this).attr('href') + '&ajax=y',
    //data: str,
    success: function(msg) {
      $('#mainPanel').slideUp(500, function() {
        $(this).html(msg).slideDown(1000);
      });
    }
  });
});