How to make all buttons(even dynamically created) in an application follow jquery button widget without calling .button() multiple times

Question

I am new to stack overflow and this is my first question. Pardon me for any mistakes. This question is more generic but i tried to search for an answer but could not find it.

Say i have a page and i am using jquery ui button() widget for all the button. What happens is i have a specific class defined for all the buttons on my page. So i can just specify $('.myButtonClass').button(); but whenever i render partial views which has button again i have to do the same thing in the partial views. Is there any way i can globally specify a transition for button or any element for that matter.

Here is a sample Fiddle which adds buttons on click. But the added buttons are not transitions as button widgets(I do not want to use clone).

http://jsfiddle.net/wjxn8/

$('.clsTest').button().click(function(){
    $(this).after('<input type="button" value="Added" class="clsTest"/>');
});

Is this possible without:- 1) Adding the css classes for a button widget manually for all the buttons created. 2) Tracking DOM Changes using Javascript and perform transitions for all the button elements.

Thanks for your help!!!

Answer 1

Since you were looking for something else, why not trigger a custom event when you load partials or whatever:

$('.clsTest').button().click(function(){
    $(this).after('<input type="button" value="Added" class="clsTest"/>').trigger('addButtonUI');
});
$(document).bind('addButtonUI',function(){
    $('.clsTest').button();
});

http://jsfiddle.net/wJXN8/3/

If you trigger your event and have the document listening for it, then you can do whatever you would like. I could have put in there the ability to add more buttons as well, but this should get the point across.

What you are asking for, some event when a button is added.... you would need to come up with that yourself and trigger it when a button is added. There is this: How to detect new element creation in jQuery? which talks about a specific event that is triggered when new elements are added to the DOM. Haven't tested it, and it looks like it may not work on IE.

Answer 2

I'm not a huge fan of this, but you could poll for new buttons. Check out my fork of your fiddle (that sounds funny):

http://jsfiddle.net/lbstr/Hq97H/

Using your example, this would look like:

setInterval(function(){
    $('.clsTest').not('.ui-button').button();
}, 1000);

As I said, I'm not a huge fan of this. I understand the desire for something like $.live here, but I still think its better to initialize your new content when you add it. If you are making an ajax call for new content, just initialize it when you add it to the DOM.

My silly polling code and $.live (which is now deprecated) might be convenient, but they perform terribly. Just my two cents. You know your code better than I do!