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

0

Я новичок в jquery, и у меня возникают проблемы с правильным клонированием этого блока элементов формы с атрибутами auto-incrementing id, для и 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 jsfiddle: http://jsfiddle.net/engRg/

Теги:
forms

2 ответа

1
Лучший ответ

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

jQuery(document.body).on('click','.removeButton', function(){...});
Поделиться
  • 0
    Намного лучше. Спасибо! Как можно клонировать только кнопку удаления, а не кнопку добавления в дополнительных полях?
  • 0
    Чтобы удалить конкретный элемент, lastRepeatingGroup.clone(false).find('.cloneButton').remove().end(); клон: lastRepeatingGroup.clone(false).find('.cloneButton').remove().end(); Тем не менее, как вы, кажется, просто хотите клонировать один элемент, а затем клонировать его напрямую, а не его родительский контейнер.
Показать ещё 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++;
});
Поделиться
  • 0
    Это выглядит аккуратнее. Моя единственная проблема в том , что я понимаю, один я использую и не один вы предложили и мне нужно , чтобы увеличить name и for атрибутов , а также. Я действительно хотел клонировать кнопку удаления, но не кнопку добавления. Спасибо, хотя, я добавлю это в закладки, когда пойму это лучше.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню