Jquery UI: Button on dynamically created elements.

Question

Hello,

I would like to add jQuery UI button to all my input submits.

$('input:submit').button();

That works great for normal buttons but it doesn't work for buttons I create dynamically.

Anybody know how to do this?

Answer 1

The easiest thing would to add this line when creating the new buttons.

$(this).button();

for example

(jQuery to create button) function(){
    $(this).button();
}

I believe you could also just call this again but it might be slower.

$('input:submit').button();

EDIT: after looking at what jQuery.tmpl is you might be able to do something like

$("#sometmpl")
    .render( arrayOfDataObjects ) // Returns multiple LIs with data filled in
    .appendTo("ul" function(){
    $("#sometmpl input:submit").button();
)};

but don't hold me to it.

OR take a look at the jquery ui css and just add the classes you need to the submit buttons. Hover may not work though

class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"

Answer 2

Thought it would be useful to show how I fixed it in my application. It's a concise version of my real code that I didn't test and there might be typos.

var app = (function(){
    var general = (function(){

        function init(){
            init_jquery_ui();
        };

        function init_jquery_ui(){
            //init stuff

            $('body').bind('added_tmpl', function(){
                //init stuff
            });
        };

        function add_tmpl(tmpl_node, append_to_node, data){
            tmpl_node.tmpl(data).appendTo(append_to_node);
            append_to_node.trigger('added_tmpl');
        };

        return{
            init: init,
            add_tmpl: add_tmpl
        };

    })();

    var somepage = (function(){

        function init(){
            load_some_form();
        };

        function load_some_form(){
            var data = { name: 'hello', age: 15 };
            general.add_tmpl($('#some_form_tmpl'), $('#some_form'), data);  
        };

        return{
            init: init
        };

    })();

    return{
        general: general,
        somepage: somepage
    };

})();

app.general.init();

if(page=='somepage'){
    app.somepage.init();
};