JQuery constant css selector equivalent to '.live ()'

Question

So, today I just came across the function "live" (), which associates any future and past elements with any event you have selected, for example, "onclick".

Now I need to configure buttons like the following, every 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 every time I use ajax to add a new button, is there a similar way to tell jQuery to customize my ANYTIME buttons. Am I adding new ones?

Thanks for any help!

Answer 1

Mmh really. But there is a .ajaxSuccess() function that runs whenever an Ajax call succeeds. So you can 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 work on any class links, not just new ones. But if you add them at a specific time (i.e. not several a.btn.plus ), you can use the selector :last ( a.btn.plus:last ).

---

You can also create a function and only its 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 an Ajax call:

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

Thus, you can pass the parent element to the function to find the link only inside this element (therefore, the code will only work with new links).

---

The last option will generate a custom event, but in the end it will be like just calling a function in your case so you don't get much.

Answer 2

You can also use a delegate in your success function.

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

Answer 3

There is a jQuery Plugin called livequery that 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 detailed information here //

JQuery - Live Query Plugin