Question

我是JQuery的新手，我正在尝试添加多个表单字段，例如<li id="container" id="add_field"><input type="text" name="text" value="text" /></li>，但我认为我的JQuery代码关闭可以帮我修复JQuery代码吗？

这是JQuery脚本。

var count = 0;
$(function(){
    $('li#add_field').click(function(){
        count += 1;
        $('#container').append(
                 '<li><input id="field_' + count + '" name="fields[]' + '" type="text" /></li>' );

    });
});

这是html代码。

<form method="post" action="index.php">
    <fieldset>
        <ul>
            <li><label for="code">Code: </label>
            <textarea rows="8" cols="60" name="code" id="code"></textarea></li>

            <li id="container" id="add_field"><input type="text" name="text" value="text" /></li>

            <li><label for="comment">Comments: </label>
            <textarea rows="8" cols="60" name="comment" id="comment"></textarea></li>

            <li><input type="submit" name="submit" value="Submit" /></li></ul>
    </fieldset>

</form>

Answer 1

.append()将在最后插入您的内容，但在目标元素中。在您的示例中，这将导致嵌套的<li>元素错误。

在您的示例中，我认为您正在寻找.after()功能。每个新元素都将插入列表的顶部，这可能不是首选。

您可以使用last()输入条件元素来测试展示位置，也可以调整HTML并使用追加。

也许是这样的：

var count = 0;

$(document).ready(function(){
    $('li#add_field').click(function(){
        count += 1;

        if(count == 1) {
            $('#container').after('<li><input id="field_' + count + '" name="fields[]" type="text" /></li>');
        }
        else {
            $('input[id^=field_]').last().parent('li').after('<li><input id="field_' + count + '" name="fields[]" type="text" /></li>');
        }
    });
});

正如其他人所提到的，<li id="container" id="add_field">上有两个ID。您应该尝试通过创建一个类或更改HTML结构来清理它。

Answer 2

你有li的重复属性

<li id="container" id="add_field">

<li id="add_field">Add Field</li>
<li id="container"><input type="text" name="text" value="text" /></li

＆GT;

Answer 3

您的代码存在的问题是，您要在现有li#container内附加列表元素，而不是与其相邻。

通过稍微调整标记可以解决很多问题。这与上面的内容不同，因此您需要创建和/或调整CSS样式以获得所需的外观。

<script type="text/javascript">
    $(function() {
        $('input.dynamic').live('click', function() {
            $(this.parentNode).after(
                $('<p>').append(
                    $('<input>').attr({type: 'text', name: 'fields[]', value: 'text', 'class': 'dynamic'})
                )
            );
        });
    });
</script>

<form method="post" action="index.php">
    <fieldset>
        <p>
            <label for="code">Code: </label>
            <textarea rows="8" cols="60" name="code" id="code"></textarea>
        </p>
        <p><input type="text" class="dynamic" name="fields[]" value="text"/></p>
        <p>
            <label for="comment">Comments: </label>
            <textarea rows="8" cols="60" name="comment" id="comment"></textarea>
        </p>
        <p><input type="submit" name="submit" value="Submit" /></p>
    </fieldset>
</form>

使用JQuery问题添加无限表单字段

3 个答案: