JQuery克隆設計模式（）

Question

我有一個動態生成的選擇框。如果需要，我希望允許用戶創建此選擇框的更多副本，但我想避免額外的數據庫調用，因此我想使用clone（）而不是AJAX load（）。問題是我需要在每個選擇框後輸入一個字段，所以用戶可以輸入一個值。 clone（）方法按預期工作，創建一個新的選擇框和輸入框。副作用是克隆（）也克隆了輸入字段元素值，該值也需要爲value =「」。任何建議，將不勝感激。

// set_add_delete_links makes sure that we dont show a [-] button 
// if there is only 1 element 
// and that we only show a [+] button on the last element 
function set_add_delete_links(){ 
$('.remove_cat').show(); 
$('.add_cat').hide(); 
$('.add_cat:last').show(); 
$("#product_categories > .category_block:only-child > .remove_cat").hide(); 
} 
function removeselect(s){ 
$(s).parent().remove(); 
set_add_delete_links(); 
return false; 
} 
function addselect(s){ 
$('#product_categories > .category_block:last').after(


    $('#product_categories > .category_block:last').clone() 



    ); 



set_add_delete_links(); 
return false; 
} 

$(document).ready(

        function(){ 
         set_add_delete_links(); 
        } 
      ); 

<div id="product_categories"> 
    <div class="category_block"> 
     <select name="category_ids[]" id="cat_list"> 
      <option value="">Select a Property</option> 
      <option value="1770">Foo0</option> 
      <option value="1773">Foo1</option> 
      <option value="1775">Foo2</option> 
      <option value="1765">Foo3</option> 
      <option value="1802">Foo4</option> 
      <option value="1766">Foo5</option> 
     </select> 
     <input class="specsinput" type="text" name="specs[]" value="" /> 
     <a href="#" onClick="return removeselect(this);" class="remove_cat"> [-] </a> 
     <a href="#" onClick="return addselect(this);" class="add_cat"> [+] </a> 
    </div> 
</div> 

Answer 1

function addselect(s){ 
$('#product_categories > .category_block:last').after(
    $('#product_categories > .category_block:last').clone() 
    ); 
$('#product_categories > .category_block:last input').val(""); // this resets the value to "" 
set_add_delete_links(); 
return false; 
} 

Answer 2

嘗試：

var myClone = $('#product_categories > .category_block:last').clone(); 
$('input.specsinput', myClone).val(''); // clear the value of the input 

Answer 3

請在DOM的克隆段進行一些處理。

像：

xxx.after($('#product_categories > .category_block:last').clone().find('input').val(''));