#javascript #php #jquery #mysql #ajax
#javascript #php #jquery #mysql #ajax
Вопрос:
Итак, я пытаюсь создать список задач, но у меня возникают проблемы с событиями «щелчка», когда я динамически загружаю контент. Чего я хочу добиться, так это того, что, как только я нажимаю на элемент, отправляю «id» через $.post в файл PHP, который удаляет указанную строку из моей базы данных MySQL. А затем показывает новый список без удаленной строки.
В настоящее время я загружаю свой «list.php » с помощью $.зайди в мой "#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 элементов, я хочу иметь возможность щелкнуть и удалить их без перезагрузки страницы. Возможно ли это?
Комментарии:
1. это потому, что вы заменили
#todo
элемент, поэтому обработчик событий исчез — попробуйте$("#todo-list").on('click', 'li',
2. Если вы динамически изменяете DOM, вам придется повторно привязать обработчики событий. В противном случае новые элементы не обнаруживаются.
Ответ №1:
ваш щелчок для удаления строки должен быть таким, вам нужно снова назначить обработчик событий для вновь добавленных строк,
function delete_row(){
let li = $(this);
let id = li.attr("id");
$.post("list.php", {id: id}, function(data){
$("#todo-list").html(data);
//assigne the event handle again
$("#todo").on("click", "li",delete_row)
});
}
$(function() {
$.get("list.php", function(data){
$("#todo-list").html(data);
$("#todo").on("click", "li",delete_row)
});
});