Modèle de conception pour JQuery clone()

Question

J'ai une boîte de sélection qui est générée dynamiquement. Je veux permettre aux utilisateurs de créer plus de copies de cette boîte de sélection si nécessaire, mais je veux éviter les appels de base de données supplémentaires, donc je veux utiliser clone() au lieu d'un chargement AJAX(). Le problème est que j'ai besoin d'un champ de saisie après chaque boîte de sélection, de sorte que l'utilisateur peut entrer une valeur. La méthode clone() agit comme prévu, créant une nouvelle boîte de sélection et un nouveau champ de saisie. Un effet secondaire de ceci est que clone() clone également la valeur de l'élément de champ input, qui doit être value = "". Toute suggestion serait appréciée.

// 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

Essayez:

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

Answer 3

Effectuer un traitement sur le segment clone du DOM.

Comme:

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