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

【问题标题】：Can't select Jquery elements after reloading a div with AJAX使用 AJAX 重新加载 div 后无法选择 Jquery 元素
【发布时间】：2016-01-27 02:47:46
【问题描述】：

我有一个消息收件箱，我在删除消息后用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");
            });             
        }

这很好用，当页面加载时，消息被隐藏，当您单击标题时，消息显示出来，折叠图标发生变化。

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

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 中（我留下评论的部分）

【问题讨论】：

请查看 ajax 调用后的重新绑定事件。发生的情况是每次在 DOM 元素上使用 AJAX 时，事件都会被清除。

标签： javascript jquery html css ajax

【解决方案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);
    });
}

【讨论】：