JQuery UI: button on dynamically created elements

Question

I would like to add a jQuery UI button to all my inputs.

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

This works fine for regular buttons, but it doesn't work for buttons that I create dynamically.

Does anyone know how to do this?

Answer 1

The easiest way to add this line when creating new buttons.

$(this).button();

eg

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

I think you could just just call it again, but it could be slower.

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

EDIT: after looking at what jQuery.tmpl you could do something like

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

but do not keep me in this.

OR take a look at jquery ui css and just add the classes needed for submit buttons. Guidance may not work though

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

Answer 2

, , . , , .

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();
};