Добавление неограниченных полей формы с проблемой JQuery

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">. Вы должны попытаться исправить это, создав класс или изменив структуру HTML.

Answer 2

Проблема с вашим кодом в том, что вы добавляете элементы списка внутри существующего 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>

Answer 3

у вас есть дубликат атрибута для 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

>