Jquery UI：动态创建元素的按钮

Question

我想在我的所有输入提交中添加jQuery UI按钮。

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

这适用于普通按钮，但它不适用于我动态创建的按钮。

有人知道怎么做吗？

Answer 1

最简单的方法是在创建新按钮时添加此行。

$(this).button();

例如

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

我相信你也可以再次调用它，但它可能会更慢。

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

编辑：看了jQuery.tmpl之后你可能会做些什么

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

但是不要抱我。

或者看一下jquery ui css，然后将所需的类添加到提交按钮。 哈弗可能无法正常工作

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