通过$ .post动态加载的内容不保留单击事件 [英] Dynamically loaded content through $.post not retaining click events
问题描述
因此，我尝试创建TODO列表，但是一旦动态加载内容，"click"事件就会出现问题. 我想要实现的是，一旦我单击一个元素，就通过$ .post将"id"发送到一个PHP文件，该文件将从我的MySQL数据库中删除该行.然后，显示一个没有删除行的新列表.
So, I'm trying to create a TODO list but I'm having problems with "click" events once I dinamically load content. What I want to achieve is that, once I click an element, send the "id" through $.post to a PHP file that deletes said row from my MySQL Database. And then, shows a new list without the deleted row.
当前，我正在将带有$ .get的"list.php"加载到我的"#todo-list" div中.但是，单击后，将发送信息，该行将被删除，我将获得不包含已删除元素的新列表.那时一切都很好.
但是，当我单击新列表中的元素时，什么也没发生.
Currently, I'm loading my "list.php" with $.get onto my "#todo-list" div. However, once I click, the info is sent, the row gets deleted, I get the new list without the deleted element. Every is ok at that point.
However, when I click an element of my new list, nothing happenns.
这是我的Javascript文件:
This is my Javascript File:
$(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页面:
Here is my HTML page:
<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";
如前所述，在获得带有已删除行的新列表之后，什么也没发生.
As said, nothing happens after I get the new list with the deleted row.
我希望我的新列表可以单击，就像第一个列表一样.当然，如果我有20个元素，我希望能够单击并删除它们而无需重新加载页面.是否有可能?
I want my new list to be clickable, the same way the first list is... and of course, if I have 20 elements, I want to be able to click and delete them without reloading the page. Is it possible?
推荐答案
您单击处理程序删除行应如下所示，您需要将事件处理程序再次分配给新添加的行，
your click hanlder to delete row should be like this,you need to assign event handler again to newly added rows,
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)
});
});
这篇关于通过$ .post动态加载的内容不保留单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
