JQuery fire событие один раз, когда ввод вводится
Когда пользователь начинает вводить пустой ввод в списке, я хотел бы, чтобы новый ввод был добавлен к списку для добавления следующего значения. Затем, если они вводят новый ввод, добавляется еще один новый и так далее.
У меня есть код ..
$('.addNew').on('input', function(){
var $parentUl = $(this).closest('ul');
if ($(this).val().length === 0){
$(this).removeClass('addNew');
$parentUl.append('<li class = "catsLi"><input type = "text" class = "catItem addNew" name = "reason[]" value = ""/></li>');
}
});
Это работает, но добавляет новый ввод каждый раз, когда пользователи вводят другой символ, а не только первый. Я пробовал использовать one вместо on, но тогда он добавит только дополнительный ввод, если пользователь вводит новый ввод, ничего не происходит.
Имея это в виду, я подумал, что проверю, пуст ли ввод, прежде чем добавлять новый ввод, поэтому он делает это только один раз для каждого ввода, но не работает.
Я вижу из проверки chrome, что когда я ввожу ввод, он фактически не меняет его значение, поэтому он всегда добавляет новый ввод, поэтому я попытался проверить $(this).text().length вместо этого, но он все еще думает, что он пуст.
Делегирование привязки к родительской ul, обработка входного события для дочерних элементов, имеющих класс addNew, а затем удаление класса addNew из входов приведет к тому, что обработчик больше не будет выполняться для них. Новые дочерние элементы с классом addNew будут обрабатываться обработчиком событий делегата.
Используйте $(.addNew) вместо $(this) внутри функции (обратный вызов), так как вы находитесь внутри функции и область видимости изменилась. Или просто зарегистрируйте this, чтобы узнать, что внутри this
использовал комбинацию обоих ваших комментариев. Я сохранил длину $ (this) в $ chars перед первым обратным вызовом, а затем if ($ chars === 1), поэтому он выполнял обратный вызов только в том случае, если на входе был только символ. Еще я делегировал привязку по ул. Спасибо вам обоим.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Использование .one() было бы хорошим вариантом, вам просто нужно убедиться, что вы также добавили слушателя в новое поле ввода, которое вы добавляете. Вот доказательство концепции:
// save a reference to the parent <ul> so we only have to look it up once
$parentUL = $('#parentUL');
function addNewField() {
// create a new <li>
var $newLI = $('<li class = "catsLi"><input type = "text" class = "catItem" name = "reason[]" value = ""/></li>');
// when the user first types in this new field, call addNewField() to add another "new" field to the list
// (.one() ensures that the event will only fire once per field)
$newLI.find('input').one('input', addNewField);
// add the new <li> element to the end of the <ul>
$parentUL.append($newLI);
}
// add a "new" field as soon as the page loads
addNewField();<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id = "parentUL">
<li class = "catsLi"><input type = "text" class = "catItem" value = "Existing One"/></li>
<li class = "catsLi"><input type = "text" class = "catItem" value = "Existing Two"/></li>
</ul>отлично, я тоже разработал другое решение, которое я опубликую, но ваш, вероятно, лучший способ сделать это, спасибо
Удалось создать собственное решение на основе комментариев сверху
$('.posUl').on('input', '.addNew', function(){
var $parentUl = $(this).closest('ul');
var $entered = $(this).val().length;
if ($entered === 1){
$parentUl.append('<li class = "catsLi"><input type = "text" class = "catItem addNew" name = "reason[]" value = ""/></li>');
}
});
Проверяя значение введенного $, я обнаружил, что оно никогда не было пустым при изменении (очевидно), а затем привязка его к ul означала, что он работал с новым вводом, который был динамическим элементом
Будьте осторожны: есть как минимум две ситуации, когда этот код, вероятно, не будет делать то, что вы хотите: (1) если вы удалите все из любого из полей и снова начнете вводить текст, этот код в конечном итоге добавит новое поле, и (2 ), если вы вставляете что-то в пустое поле ввода, а не вводите его, этот код не будет добавлять новое поле.
Возможный дубликат Привязка событий к динамически создаваемым элементам?