Question

我是JQuery的新手，我试图通过点击按钮添加多个表单字段。虽然我能够删除现有字段，但我无法添加新字段。

我的HTML代码是：

<div class="repeatable-wrap">
    <ul id="tracks-repeatable" class="repeatable-fields-list">
        <li>
            <input type="text" name="fr_options1" value="" size="200" />
            <a class="repeatable-field-remove button" href="#">REMOVE</a>
        </li>
    </ul>
</div>
<a class="repeatable-field-add button" href="#">ADD</a>

和Jquery：

jQuery(function(jQuery) {
    jQuery('.repeatable-field-add').click(function() {
        var theField = jQuery(this).closest('div.repeatable-wrap').find('.repeatable-fields-list li:last').clone(true);
        var theLocation = jQuery(this).closest('div.repeatable-wrap').find('.repeatable-fields-list li:last');
        jQuery('input', theField).val('').attr('name', function(index, name) {
            return name.replace(/(\d+)/, function(fullMatch, n) {
                return Number(n) + 1;
            });
        });
        theField.insertAfter(theLocation, jQuery(this).closest('div.repeatable-wrap'));
        var fieldsCount = jQuery('.repeatable-field-remove').length;
        if (fieldsCount > 1) {
            jQuery('.repeatable-field-remove').css('display', 'inline');
        }
        return false;
    });

    jQuery('.repeatable-field-remove').click(function() {
        jQuery(this).parent().remove();
        var fieldsCount = jQuery('.repeatable-field-remove').length;
        if (fieldsCount == 1) {
            jQuery('.repeatable-field-remove').css('display', 'none');
        }
        return false;
    });
});

Answer 1

您的可重复字段添加链接位于可重复包装div之外，因此当您致电.closest('div.repeatable-wrap')时，它找不到任何内容。

将它移到div中可以让你走上正确的轨道 - http://jsfiddle.net/Z4kYf/1/

Answer 2

小鸡这个代码......

       jQuery(function(jQuery) {
jQuery('.repeatable-field-add').click(function() { 
var theField = jQuery('div.repeatable-wrap').find('.repeatable-fields-list li:last').clone(true);

  //   console.log(theField);
    var theLocation = jQuery('div.repeatable-wrap').find('.repeatable-fields-list li:last');
    jQuery('input', theField).val('').attr('name', function(index, name) {
        return name.replace(/(\d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    });
    theField.insertAfter(theLocation, jQuery(this).closest('div.repeatable-wrap'));
    var fieldsCount = jQuery('.repeatable-field-remove').length;
    if (fieldsCount > 1) {
        jQuery('.repeatable-field-remove').css('display', 'inline');
    }
    return false;
});

jQuery('.repeatable-field-remove').click(function() {
    jQuery(this).parent().remove();
    var fieldsCount = jQuery('.repeatable-field-remove').length;
    if (fieldsCount == 1) {
        jQuery('.repeatable-field-remove').css('display', 'none');
    }
    return false;
});
});

Answer 3

我的看法：

http://jsfiddle.net/hUrZB/

<ul class='list'><li class='repeat'>
    <input type='text' name="options"/>
    <input class='remove' type='button' value="remove"/>
    <li>
</ul>
        <input class='add' type='button' value='add'/>

$(function() {
    var list = $(".list");
    var repeatable = $("li.repeat").clone(true);
    repeatable.on("click", ".remove", function(e) {
        $(this).parent(".repeat").remove()
    });
    var add = $(".add");
    add.click(function(){`enter code here`
        r = $(repeatable).clone(true);
        r.find("[name=options]").attr("value","something");
        list.append(r);
    });
    $(".repeat").remove();
    list.append(repeatable);
});

Jquery - 可重复的表单字段 - 添加不起作用

3 个答案: