Question

我对jquery很新，并且无法使用自动递增id，for和name属性正确克隆这个表单元素块。我正在克隆div.repeatingSection，理想情况下我只想克隆克隆部分上的删除按钮。

到目前为止，我已经设法让它工作但按钮本身被克隆（即使我虽然.clone(false)应该阻止它）。我也收到以下错误：Uncaught TypeError: Object [object Object] has no method 'live'这可能是它无法正常工作的原因。

HTML

<fieldset>

<legend>Exp&eacute;rience professionnelle</legend>    
<div class="row repeatingSection"> 

<div class="large-10 small-12 columns panel inside">
    <div class="large-6 columns">

        <label for="poste_1">Poste :</label>
        <input type="text" name="poste_1" id="poste_1"/>

        <div class="row">  
            <div class="large-6 columns">    
                <label for="de_1">De :</label>
                <input type="date" name="de_1" id="de_1" class="small"/>  
            </div>
            <div class="large-6 columns">    
                <label for="a_1">A :</label>
                <input type="date" name="a_1" id="a_1" class="small"/>  
            </div>
        </div>

        <label for="contrat_1">Contrat :</label>
        <select name="contrat_1" ID="contrat_1" class="small">
        <option></option>
        <option value='CDI'>CDI</option>
        <option value='CDD'>CDD</option>
        <option value='stagiaire'>Stagiaire</option>
        <option value='saisonnier'>Saisonnier</option>
        </select>

    </div>
    <div class="large-6 columns">
        <label for="description_1"> Description: </label>
        <textarea id="description_1" name="description_1" class="lrg-txtarea"></textarea>
    </div>
</div><!-- end repeatingSection -->

<div class="large-2 small-12 columns">
    <button class="cloneButton small secondary radius indent">Ajouter +</button>
    <button class="removeButton small secondary radius indent">Enlever -</button>
</div>

JQuery的

jQuery('.cloneButton').click(function(event){

event.preventDefault();

var currentCount =  jQuery('.repeatingSection').length;
var newCount = currentCount+1;
var lastRepeatingGroup = jQuery('.repeatingSection').last();
var newSection = lastRepeatingGroup.clone(false);

newSection.insertAfter(lastRepeatingGroup);
newSection.find("input").each(function (index, input) {
    input.id = input.id.replace("_" + currentCount, "_" + newCount);
    input.name = input.name.replace("_" + currentCount, "_" + newCount);
});
newSection.find("label").each(function (index, label) {
    var l = jQuery(label);
    l.attr('for', l.attr('for').replace("_" + currentCount, "_" + newCount));
});
return false;
});

jQuery('.removeButton').live('click', function(){

    jQuery(this).closest('div.repeatingSection').remove();
    return false;
});

任何帮助都会受到如此多的赞赏。这是一个js a jsfiddle：http://jsfiddle.net/engRg/

Answer 1

从jq 1.9开始，使用.on()委托事件：{或者您可以使用.delegate()方法}

jQuery(document.body).on('click','.removeButton', function(){...});

Answer 2

嗨，我相信你的任务已经完成，请查看这个小提琴.. http://jsfiddle.net/mjaric/tfFLt/

$("button.clone").live("click", function(){
    $(this).parents(".clonedInput").clone()
        .appendTo("body")
        .attr("id", "clonedInput" +  cloneIndex)
        .find("*").each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
    });
    cloneIndex++;
});

重复表单字段按钮的麻烦

2 个答案: