javascript - 使用 AJAX 重新加载 div 后无法选择 Jquery 元素

Question

我有一个消息收件箱，在删除消息后使用 AJAX 刷新该消息收件箱，导致出现一个没有该消息的新消息收件箱。

<div class="container>
    <div class="message_box">
        <div class="title"> </div>
        <div class="message"> </div>
        <div class="title"> </div>
        <div class="message"> </div>
        <div class="title"> </div>
        <div class="message"> </div>
    </div>
</div>

我的 HTML 代码如下所示，当文档准备好时，我调用显示/隐藏消息函数:

        $(document).ready(function()
        {
            message_show();
        });

        function message_show()
        {
            $("div.message").hide();                
            $(document).on("click", "div.title", function()
            {
                $("#" + this.id + ".message").fadeToggle("fast");
                $("#fold" + this.id).fadeToggle("fast");
            });             
        }

这工作正常，当页面加载时，消息被隐藏，当您单击标题时，消息就会显示，并且折叠图标会发生变化。

但是，当我通过 AJAX 刷新内容并使用 .get() 删除消息时:

function delete_message(message_id) 
{
    $.get("message_inbox.php",{delete_id:message_id}, function(data)
    {
        $("div#messages_inbox").load("message_inbox.php div#messages_inbox > *");
        // $("div.message").hide();
        message_show();
    });
}

使用.load后，消息div不再隐藏。

我设法通过使用 $(document).on 来切换它们来选择 div.title，这有效，但是在加载内容时隐藏消息似乎并不可行工作。

我也无法将 div 隐藏在 $.get 中(我留下评论的部分)

Answer 1

$("div#messages_inbox").load(...) - 当 .load 时，您将覆盖 #messages_inbox 内的所有内容 完成。

如果message_inbox.php返回的内容中div#messages_inbox > *内部不包含div.message或div.title，看起来 message_show() 没有执行任何操作。

请参阅 .load 的文档

您还需要调用 message_show() 作为 .load 的回调函数，以确保在使用内容之前已加载内容:

function delete_message(message_id) 
{
    $.get("message_inbox.php",{delete_id:message_id}, function(data)
    {
        $("div#messages_inbox").load("message_inbox.php div#messages_inbox > *", message_show);
    });
}