Question

所以基本上我在元素内部有一些内容，之后有一个空元素，我按一个按钮，ajax将其他页面中的内容加载到空元素中，然后旧元素向上滑动，然后删除带有新内容的元素获取旧元素的ID并在其自身下生成一个新的空元素。

基本列车式内容切换。我的代码是这样的：

    $("#products").click(function () {
        $("#next").load("products.php section");
        $("#content").slideUp("slow", function () { $(this).remove(); });
        $("#next").attr("id", "content");
        $(document).ajaxComplete(function () {
            $("#content").after("<div id=\"next\"></div>");
        });
    });

看起来如此简单，但却产生了新的＆＃34;下一个＆＃34; div因此，在滑动事件发生之前，新的重命名内容div将是页面中的最后一个元素，而我需要将下一个元素作为最后一个元素。

在开始之前我的元素就像

<div id="content">
[some content inside]
</div>
<div id="next"></div>

操作的中途就像

<div id="content" style="height:0;">
[some content inside]
</div>
<div id="next">[some new content inside]</div>

在操作结束时，他们就像

<div id="next"></div>
<div id="content">
[some new content inside]
</div>

一切都很好，除了我需要元素的操作顺序与开头完全相同，所以接下来应该追加。它并没有，即使我在.ajaxComplete()上运行它。

代码似乎很简单，我无法发现任何错误：/没有其他代码会干扰。在$(window).ready()我也会运行$("#content").after("<div id=\"next\"></div>");行，以便第一次生成下一个div，但这是关于它的。救命？

很抱歉，我无法在此处提供简化案例，因为.load()仅限本地。

Answer 1

我认为你有一个潜在的时间问题，即slideUp()完成之间的比赛，即旧的#content被删除而.load()将成为新的#content {1}}。如果.load()首先完成，您最终会得到两个#content项，这会使您的ajaxComplete代码混淆，因为它不一定会在正确的代码上运行。

这个建议的代码重新编写事件序列，使其更加无故障并且对该时间不敏感。

首先，我们通过立即删除它的属性使slideUp()操作完全独立。这样可以确保我们不会同时拥有多个#content元素。

其次，我们在.load()上启动#next并立即将其属性更改为#content。最后，我们不是通过.ajaxComplete()触发，而是触发使用.load()的完成功能，我们可以使用$(this)来确保添加新的#next在我们刚加载的内容之后。这样做，对时间没有敏感性。这是结果代码：

$("#products").click(function () {
    // slideup the old content, remove the #content attribute and 
    // then remove the content itself after it slides up
    $("#content").removeAttr("id")
        .slideUp("slow", function () { $(this).remove(); });

    $("#next").attr("id", "content").load("products.php section", function() {
        // add the #next after the new content to set things up for the next operation
        $(this).after('<div id="next"></div>');
    });
});

您还会注意到，使用jQuery链接时，#content上只有一个操作序列，而#next上的一个操作序列使代码更加清晰。

如何在使用jquery完成ajax时将DOM元素追加到目标？

1 个答案: