在附加列表項上添加一個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 
}); 

僅適用於.Remove元素都在DOM，當你致電$('.Remove').button(...)，並且在調用它時沒有任何.Remove元素。您想將它合併到您的#Add處理程序中，以便在創建新按鈕時創建jQuery-UI。事情是這樣的：

$("#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元素。