Кнопка JavaScript не работает
Я создаю расширение Chrome, которое позволяет пользователю создавать список дел. Пользователь может добавлять и отмечать задачи. Я добавил кнопку удаления, но кнопка удаления не работает. Когда я нажимаю кнопку удаления, ничего не происходит.
$(() => {
$('input').on('keypress', function(e) {
if (e.keyCode == 13) {
const newTask = $(this).val();
if (newTask) {
var li = $("<li><input type='checkbox' id='newtasklist' class='right-margin' <label>" + newTask + "</label> <button type='button' class='deletetask'>Delete</button> </li>");
$('#tasksUL').append(li);
$(this).val("");
}
}
});
$('body').on('click', ':checkbox', function(e) {
$(this).parent().toggleClass('selected');
});
$('.deletetask').on("click", function() {
$(this).parent().remove();
});
});.selected {
text-decoration: line-through;
font-size: 20px;
}<input type = "text" name = "newtask" value = "" spellcheck = "false" placeholder = "New Task" id = "newtask">
<ul id = "tasksUL">
</ul>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы динамически создаете кнопку в своем JS-файле. Добавьте в документ прослушиватель событий по щелчку, а затем отфильтруйте класс задачи удаления.
Попробуй это:
$(document).on("click", ".deletetask", function() {
$(this).parent().remove();
}
Это должно заменить ваш текущий прослушиватель событий .deletetask.
Причина, по которой он не работает должным образом, заключается в том, что этот класс deletetask динамически генерируется вашим JS. Существующий прослушиватель событий не привязан к динамически созданному классу, поэтому он никогда не узнает, что класс был выбран. Вам нужно, чтобы ваш прослушиватель событий прослушивал откуда-то выше этого класса в DOM. Есть несколько разных способов справиться с этим:
(Как упомянул другой пользователь)
$(document).on('click', '.deletetask', function() {
$(this).parent().remove();
}
Этот код выше прослушивает весь объект JS document, что не является самым эффективным использованием ресурсов, но выполняет свою работу. Этот метод может быть полезен, если класс deletetask вставлен в разные места, и вы хотите, чтобы один прослушиватель событий мог обрабатывать события кликов.
Однако способ более эффективным сделать это состоит в том, чтобы использовать идентификатор родителя tasksUL (или класс тоже подойдет), который уже находится на странице с самого начала, как ваш прослушиватель событий, например:
$('#tasksUL').on('click', '.deletetask', function() {
$(this).parent().remove();
}
Этот раздел кода будет прослушивать любое событие щелчка внутри вашего идентификатора tasksUL, которое происходит в классе deletetask, и он прослушивает только эти события щелчка, а не прослушивает каждое событие щелчка в document.
В предоставленном вами коде ваш прослушиватель событий назначается еще до создания кнопки удаления, поэтому ничего не происходит.