0

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

4

2 に答える 2

1

こんにちは、私はあなたの仕事がすでにこのフィドルをチェックアウトしたと信じています.. 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++;
});
于 2013-09-25T09:47:39.190 に答える