Jquery persistent css selector equivalent to '.live()'

Question

So today I just came across the 'live()' function that binds any future and past elements to the whatever event you choose, such as 'onclick'.

Right now I'm having to set up buttons like the following each time I load a new button via ajax ...

$('a.btn.plus').button({icons:{primary:'ui-icon-plusthick'}});
$('a.btn.pencil').button({icons:{primary:'ui-icon ui-icon-pencil'}});
$('a.btn.bigx').button({icons:{primary:'ui-icon ui-icon-closethick'}});

So, instead of calling these lines each time I use ajax to add a new button, is there a similar way to tell JQuery to setup my buttons ANYTIME I add new ones?

Thanks for any help!

Answer 1

Mmh not really. But there is the function .ajaxSuccess() which is triggered whenever an Ajax call is successful. So you could do:

$('body').ajaxSuccess(function() {
    $('a.btn.plus').button({icons:{primary:'ui-icon-plusthick'}});
    $('a.btn.pencil').button({icons:{primary:'ui-icon ui-icon-pencil'}});
    $('a.btn.bigx').button({icons:{primary:'ui-icon ui-icon-closethick'}});
});

But this will run on any links with the classes, not only on the new ones. But if you append them on a time (i.e. not multiple a.btn.plus at once) you might be able to use the :last selector (a.btn.plus:last).

---

You can also create a function and just that from your callback functions:

function links() {
   $('a.btn.plus').button({icons:{primary:'ui-icon-plusthick'}});
   $('a.btn.pencil').button({icons:{primary:'ui-icon ui-icon-pencil'}});
   $('a.btn.bigx').button({icons:{primary:'ui-icon ui-icon-closethick'}});
}

and in the Ajax call:

$.ajax({
   //...
   success: function(msg){
      links();
   }
});

This way you can pass the parent element to the function in order to find the link only inside this element (so the code would only work on the new links).

---

A last option would be generate a custom event but in the end this would be similar to just doing a function call in your case so you gain not much.

Answer 2

You can use delegate in your success function too

$("body").delegate("a.btn", "hover", function(){
$(this).toggleClass("hover");
});

Answer 3

There is a Jquery Plugin called livequery which covers your requirements.

I like to think of this plugin as Jquery .live() but without the need for an event ('click') etc.

You can find more info here//

Jquery - Live Query Plugin