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代码看起来就像那样，当文档准备就绪时，我调用了一个show / hide消息函数：

        $(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不再被隐藏。

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

我也无法隐藏$.get内部的div（我留下的评论部分）

Answer 1

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

如果div#messages_inbox > *返回的内容中message_inbox.php内的内容不包含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);
    });
}

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

1 个答案: