jquery – 使用表单字段重复div

我有一个表单,我希望能够根据需要多次复制一组字段.而且我还想让那些新字段组的属性的字段id,名称和标签增加1.我到目前为止用jQuery尝试了这个,并且至少复制了字段组,但是删除了没有不行.而且我不确定如何为这3个属性中的每一个做1.我感谢任何帮助.

这是一个jsfiddle,它
http://jsfiddle.net/Unfxn/

HTML

<form method="post" action="#" class="inlineForm" enctype="multipart/form-data">
    <div class="repeatingSection">
        <a href="#" class="buttonGray buttonRight deletefight">Delete</a>
        <input type="hidden" name="fighter_a_id_1" id="fighter_a_id_1" value="" />
        <input type="hidden" name="fighter_b_id_1" id="fighter_b_id_1" value="" />
        <input type="hidden" name="winner_id_1" id="winner_id_1" value="" />
        <div class="formRow">
            <label for="fighter_a_1">fighters</label>
            <input type="text" name="fighter_a_1" id="fighter_a_1" value="" /> <span class="formTextExtraCenter">vs</span> <input type="text" name="fighter_b_1" id="fighter_b_1" value="" />
        </div>
        <div class="formRow">
            <label for="fighter_a_pay_1">fighter Pay $</label>
            <input type="text" name="fighter_a_pay_1" id="fighter_a_pay_1" value="" /> <span class="formTextExtraCenter">vs</span> <input type="text" name="fighter_b_pay_1" id="fighter_b_pay_1" value="" />
        </div>
        <div class="formRow">
            <label for="winner_1">Winner</label>
            <input type="text" name="winner_1" id="winner_1" value="" />
        </div>
        <div class="formRow">
            <label for="method_1">Method</label>
            <input type="text" name="method_1" id="method_1" value="" />
        </div>
        <div class="formRow">
            <label for="method_type_1">Method Type</label>
            <input type="text" name="method_type_1" id="method_type_1" value="" />
        </div>
        <div class="formRow">
            <label for="round_1">Round</label>
            <input type="text" name="round_1" id="round_1" class="fieldSmall" value="" />
        </div>
        <div class="formRow">
            <label for="time_1">Time</label>
            <input type="text" name="time_1" id="time_1" class="fieldSmall" value="" />
        </div>
        <div class="formRow">
            <label for="fight_number_1">fight #</label>
            <input type="text" name="fight_number_1" id="fight_number_1" class="fieldSmall" value="" />
        </div>
    </div>
    <div class="formRowRepeatingSection">
            <a href="#" class="buttonGray buttonRight addfight">Add fight</a>
        </div>
    <div class="formRow">
        <input type="submit" class="submitButton" value="Save fights" />
    </div>
</form>

JS

// Add a new repeating section
$('.addfight').click(function(){
    var lastRepeatingGroup = $('.repeatingSection').last();
    lastRepeatingGroup.clone().insertAfter(lastRepeatingGroup);
    return false;
});
// Delete a repeating section
$('.deletefight').click(function(){
    $(this).parent('div').remove();
    return false;
});

解决方法

这应该根据所有三个元素自动重命名：

// Add a new repeating section
$('.addfight').click(function(){
    var currentCount =  $('.repeatingSection').length;
    var newCount = currentCount+1;
    var lastRepeatingGroup = $('.repeatingSection').last();
    var newSection = lastRepeatingGroup.clone();
    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 = $(label);
        l.attr('for',l.attr('for').replace("_" + currentCount,"_" + newCount));
    });
    return false;
});

// Delete a repeating section
$('.deletefight').live('click',function(){
    $(this).parent('div').remove();
    return false;
});​

我更改了删除处理程序,改为使用.live(),这样处理程序也会附加到该按钮的新创建副本.现在,如果你正在使用jquery> 1.7你应该使用.on()

on()版本将是：

// Delete a repeating section
$(document).on('click','.deletefight',function(){
    $(this).parent('div').remove();
    return false;
});