Динамически добавлять поля ввода при необходимости

Question

Я пытаюсь добавить дополнительные поля ввода в мою HTML-форму по мере необходимости. Вот мой код:

Мой код

JS

$(document).ready(function(e) {
    var i = $('.form-inputs input').size() + 1;

    $('.section-topic-field').last().bind('keyup', function(e) {
        if($(this).val() != "") {
            var html_new_field = '<input name="txtTopicName' + i + '" class="section-topic-field" type="text" onfocus="this.value=\'\'" placeholder="topic name #' + i + '" /><br />';

            $('.form-inputs').append($(html_new_field).fadeIn('slow'));

            i++;
        }
    });
});

HTML

        <input name="txtSection" type="text" onfocus="this.value=''" placeholder="sections"/><br/>
    <div class="form-inputs">
        <input name="txtTopicName1" class="section-topic-field" type="text" onfocus="this.value=''" placeholder="topic name #1"/><br />
     </div>
    <!--<button class="btn btn-mini btn-primary" type="submit">Create</button>-->
</form>

Эта проблема

Однако функция ВСЕГДА запускается в первом поле ввода, поэтому при вводе, например, 4 букв в первом поле ввода, будет создано 4 поля ввода. И когда вы вводите что-то в последнее поле ввода (в данном случае четвертое), ничего не происходит. Так по какой-то причине $('.section-topic-field').last() всегда выбирает первое поле ввода.

Я также попробовал :last селектор и :last-child, но результат все тот же

Любая помощь?

Спасибо!

Answer 1

Поскольку вы добавляете input динамически я предлагаю вам использовать .on(),

var i = $('.form-inputs input').size() + 1;

$('.form-inputs').on('keyup', '.section-topic-field:last', function (e) {
    if ($(this).val() != "") {
        var html_new_field = '<input name="txtTopicName' + i + '" class="section-topic-field" type="text" onfocus="this.value=\'\'" placeholder="topic name #' + i + '" /><br />';
        $('.form-inputs').append($(html_new_field).fadeIn('slow'));
        i++;
    }
});

Скрипка здесь

К сожалению, я не очень хорошо объясняю, но здесь вы можете найти краткое резюме on() метод. Stackru ссылка;

Как сказано в ответе выше

$("static selector").on('click', "dynamic selector", fn);

Учитывая параметры выше, on() метод будет искать dynamic selector в static selector когда она сфокусирована, нажата и т.д..

Используя это как

$("static selector").on('click', fn);

Будет работать как нормальный .click()

Answer 2

Он создает новое поле каждый раз, когда у вас есть событие keyup - оно не связано с:last. Я не уверен, как это исправить, но if($(this).val() != "") там не работает, поэтому каждый новый введенный символ будет вызывать еще одно поле. Как насчет использования $('.section-topic-field').change(function() { ...}); вместо?

Answer 3

Вы привязываете прослушиватель событий к последнему полю, которое существует в готовом документе - которое фактически является первым (и единственным) полем. Этот прослушиватель событий остается в этом точном поле в течение всего времени его существования или до тех пор, пока вы не отсоедините прослушиватель.

Помните, что вы не запускаете весь свой код в кавычках каждый раз, когда нажимаете клавишу, а только функцию, которую вы передаете слушателю.

Вам нужен следующий логический поток:

1. Создайте первый элемент ввода
2. Свяжите прослушиватель событий с этим элементом, как только пользователь перестанет связывать *, что создаст новый элемент, если текущий не пуст
3. Когда происходит это событие:
   • создать новый элемент ввода
   • отвяжите оригинального слушателя, которого вы создали в 2
   • привязать нового слушателя к новому элементу ввода (с той же функциональностью)

*keyup в этом случае связывать нехорошо, так как это сработает, как только пользователь введет первую букву. Вы, вероятно, должны рассмотреть вместо этого использование blurили подождать несколько секунд, прежде чем вызвать событие (см. setTimeout). Или вы могли бы использовать кнопку для пользователя, чтобы явно запросить новое поле ввода?

Дайте мне знать, если вам нужны примеры.