Итак, я пытаюсь создать список TODO, но у меня возникают проблемы с событиями "click", когда я динамически загружаю контент.
Я хочу добиться того, чтобы, щелкнув по элементу, отправил «id» через $ .post в файл PHP, который удаляет указанную строку из моей базы данных MySQL. А затем показывает новый список без удаленной строки.
В настоящее время я загружаю свой "list.php" с $ .get на мой "#todo-list" div. Однако, как только я нажимаю, информация отправляется, строка удаляется, я получаю новый список без удаленного элемента. Все в порядке в этот момент.
Однако, когда я щелкаю элемент моего нового списка, ничего не происходит.
Это мой файл Javascript:
$(function() {
$.get("list.php", function(data){
$("#todo-list").html(data);
$("#todo").on("click", "li", function(){
let li = $(this);
let id = li.attr("id");
$.post("list.php", {id: id}, function(data){
$("#todo-list").html(data);
});
});
});
});
Вот моя HTML-страница:
<html>
<head>
<title>My test app</title>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="./script.js"></script>
<style>
.todo-list li:hover {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>TODO: Just a list with stuff to do...</h1>
<div id="todo-list">
Loading content...
</div>
</body>
</html>
А это мой PHP-файл:
// code to connect to MySQL with PDO...
if ($_POST) {
// code to delete the id
}
$data = $pdo->prepare("SELECT * FROM todo");
$data->execute();
echo "<ul id='todo'>\n";
while ($row = $data->fetch()) {
echo "<li id='{$row['id']}'>{$row['todo']}</li>\n";
}
echo "</ul>\n";
Как уже говорилось, после получения нового списка с удаленной строкой ничего не происходит.
Я хочу, чтобы мой новый список был кликабельным, так же, как и первый список ... и, конечно, если у меня есть 20 элементов, я хочу иметь возможность щелкать и удалять их без перезагрузки страницы. Является ли это возможным?