Блог

Главная - Вопросы по программированию - Динамически загружаемый контент через $.post, не сохраняющий события нажатия

Динамически загружаемый контент через $.post, не сохраняющий события нажатия

#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)
});
});