Список дел работает в консоли, но не на странице

Question

Я делаю приложение списка дел с HTML, CSS и JavaScript.

У меня есть кнопка, указанная после каждого задания (на самом деле span). Когда пользователь нажимает span, он должен в настоящее время получить идентификатор пролета, готовый перейти к функции удаления (который я еще не написал).

Вот событие щелчка:

$(".delete").click(function(e) { 
    var clickedtodelete = $(this).attr("id"); 
    console.log("Deleting " + clickedtodelete); 
}); 

Когда я проверить страницу, я нажимаю промежуток с классом .delete и должны получить на консоли следующий вывод: Deleting Test To-Do. Однако ничего не происходит.

Тем не менее, я получаю правильный вывод на консоль, если я сначала наберу событие клика вручную. Таким образом, это может быть только ошибка с получением скрипта со страницы.
Все остальные скрипты с одной и той же страницы .js работают, однако.

Наконец, я получаю предупреждение типа MIME, но мне сказали, что это не повлияет на него.

Answer 1

С учетом списка дел, я думаю, элементы генерируются динамически союзник. Я подозреваю, что причиной вашей проблемы является то, что события щелчка связаны перед элементами, которые вы хотите связать с ними, чтобы существовать. Вы можете решить on() метод это с помощью jQuery «S так:

$(document).on({ 
    click: function(e) { 
     var clickedtodelete = $(this).attr("id"); 
     console.log("Deleting " + clickedtodelete); 
    } 
}, '.delete'); 

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

Answer 2

Если элементы добавляются динамически, вы должны использовать делегирование:

$(document).on("click",".delete", function (e) { 
    var clickedtodelete = $(this).attr("id"); 
    console.log("Deleting " + clickedtodelete); 
}); 

Или вы не ждали DOM готовы:

$(function(){...}); 

Или вы могли бы поместить свой код обработчика непосредственно перед закрытие тега тела:

<script> 
$(".delete").click(function (e) { 
    var clickedtodelete = $(this).attr("id"); 
    console.log("Deleting " + clickedtodelete); 
}); 
</script> 
</body>