JQuery UI: кнопка на динамически созданных элементах

Question

Я хотел бы добавить кнопку jQuery UI ко всем входящим вводам.

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

Это отлично работает для обычных кнопок, но не работает для кнопок, которые я создаю динамически.

Кто-нибудь знает, как это сделать?

Answer 1

Проще всего добавить эту строку при создании новых кнопок.

$(this).button(); 

, например

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

Я считаю, что вы также можете просто назвать это снова, но это может быть медленнее.

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

EDIT: посмотрев на то, что 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(); 
};