Проблема с повторяющимися кнопками полей формы

Я новичок в 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/


javascript forms jquery repeat
person mantis    schedule 25.09.2013    source источник
comment
В зависимости от того, какую версию jq вы используете (информация не предоставляется вашим jsfiddle !!!), функция live() была удалена (jq 1.9), используйте синтаксис делегирования .on().   -  person A. Wolff    schedule 25.09.2013
comment
Я считаю, что это 1.10.2 (он должен работать с Wordpress 3.6). Тогда это объясняет ошибку.   -  person mantis    schedule 25.09.2013

Ответы (2)


arrow_upward
1
arrow_downward

Начиная с jq 1.9, используйте .on() для делегирования события: {или вы можете использовать метод .delegate()}

jQuery(document.body).on('click','.removeButton', function(){...});
person A. Wolff    schedule 25.09.2013
comment
Намного лучше. Спасибо! Как я мог клонировать только кнопку удаления, а не кнопку добавления в дополнительных полях? - person mantis; 25.09.2013
comment
Чтобы удалить определенный элемент из клона: lastRepeatingGroup.clone(false).find('.cloneButton').remove().end(); Это сказано, поскольку вы, кажется, просто хотите клонировать один элемент, а затем клонировать его напрямую, а не его родительский контейнер. - person A. Wolff; 25.09.2013
comment
Нет, я хочу клонировать все элементы в div, а не только кнопку. - person mantis; 25.09.2013
comment
А, теперь я понимаю, что вы имеете в виду. Если я заполню раздел, а затем нажму кнопку «Добавить», я продублирую поля формы и их содержимое. Вместо пустой формы. - person mantis; 25.09.2013

arrow_upward
1
arrow_downward

Привет, я считаю, что ваша задача уже выполнена. Проверьте эту скрипту. /

$("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++;
});
person codebreaker    schedule 25.09.2013
comment
Он выглядит опрятнее. Моя единственная проблема в том, что я понимаю тот, который я использую, а не тот, который вы предложили, и мне также нужно увеличить атрибуты name и for. Я действительно хотел клонировать кнопку удаления, но не кнопку добавления. Тем не менее, спасибо, я добавлю это в закладки, когда я пойму это лучше. - person mantis; 25.09.2013