追加されたリスト項目にjQuery UIボタンを追加しますか？

Question

jQueryの新機能です。追加されたリストにjQuery UIボタンを追加しようとしています。
ここに私が使ったコードはありますが、もちろんです。私は誰かが、このおかげで私を助けることができると思います:(

を動作しません:)

<ul></ul> 
<button id="Add" type="button">Add</button> 

<script> 
    $(document).ready(function() { 
     $("#Add").button({ 
      icons: { 
       primary: "ui-icon-plusthick" 
      }, 
      text: true 
     }); 

     $("#Add").click(function() { 
      $("ul").append("<li>" 
         + "<span>SOME TEXT</span>" 
         + "<button class='Remove' type='button'>Remove</button>" 
         + "</li>"); 
      return false; 
     }); 

     $(".Remove").button({ 
      icons: { 
       primary: "ui-icon-minusthick" 
      }, 
      text: true 
     }); 
    }); 
</script> 

Answer 1

この：。

$(".Remove").button({ 
    icons: { 
     primary: "ui-icon-minusthick" 
    }, 
    text: true 
}); 

あなただけDOMである.Remove要素に適用します$('.Remove').button(...)に電話し、電話するときには.Remove要素がありません。これをあなたの#Addハンドラにマージして、作成時に新しいボタンがjQuery-UI-ifiedになるようにします。このような何か：

$("#Add").click(function() { 
    var $li = $('<li><span>SOME TEXT</span><button class="Remove" type="button">Remove</button></li>'); 
    $li.find('button').button({ 
     icons: { primary: 'ui-icon-minusthick' }, 
     text: true 
    }); 
    $("ul").append($li); 
    return false; 
}); 

デモ：http://jsfiddle.net/ambiguous/fu9e9/

そして、あなたの（予想）次の質問には、あなたが "削除" ボタンをフックする$(document).on(...)を使用したいと思う：

​$('ul').on('click', '.Remove', function() { 
    $(this).closest('li').remove(); 
});​​​​​​​​ 

デモ：http://jsfiddle.net/ambiguous/fu9e9/2/

これは、コールバック関数をすべての既存のおよび将来のすべての要素にフックします（.Remove要素）。