0

我对 JQuery 相当陌生，我正在尝试通过单击按钮添加多个表单字段。虽然我能够删除现有字段，但我无法添加新字段。

测试：http: //jsfiddle.net/Z4kYf/

我的 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;
    });
});​

​</p>

4

3 回答 3

2

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

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

于 2012-11-23T22:07:15.693 回答
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;
});
});​
于 2012-11-23T22:09:00.473 回答
1

我的看法：

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);
});​
于 2012-11-23T22:47:23.337 回答