javascript - jQuery多个ajax加载同一个动态页面

Question

我有一个包含动态内容的页面，其内容随参数变化。

我正在尝试比较不同部门的类(class)。首先，我选择计算机科学并将其类(class)加载到左侧的第一个 div 中。 (#list1)

加载第一个内容后，我将部门更改为工业工程，然后单击第二个按钮将类(class)列表加载到第二个 div (#list2)

但是当我加载第二个 div 时，第一个 div 内容会像第二个(工业工程)一样发生变化。但如果我首先加载第二个 div 它的工作! (但客户不能接受)

我的代码是这样的，

<div class="row">
<div class="col-md-12">
    <div class="col-md-6">
        <div id="list1"></div>
    </div>
    <div class="col-md-6">
        <div id="list2"></div>
    </div>
</div>
</div>

和按钮点击事件

$(document).on("click", ".btn-listele", function () {

        var direction = $(this).attr("data-taraf");
        var send2 = $.post("/Intibak/DersIntibak/CleanIntibakDers");
        send2.done(function () {
        if (direction == "sol") {
            $("#list1").load("/Genel/BolumPlan/IntibakDersPlan?guncelMi=true&groupable=true");
        }
        if (direction == "sag") {
            $("#list2").load("/Genel/BolumPlan/IntibakDersPlan?guncelMi=true&groupable=true");
        }
        });
    });

注意:如果我像上面那样更改 div 顺序，那么问题就相反了。

<div class="row">
<div class="col-md-12">
    <div class="col-md-6">
        <div id="list2"></div>
    </div>
    <div class="col-md-6">
        <div id="list1"></div>
    </div>
</div>
</div>

我的按钮代码

<span class="btn btn-info pull-right btn-listele" id="btn-listele-sol" data-taraf="sol">Ders Planlarını Listele</span>

<span class="btn btn-info pull-right btn-listele" id="btn-listele-sag" data-taraf="sag">Ders Planlarını Listele</span>

Answer 1

Script Execution

当使用不带后缀选择器表达式的 URL 调用 .load() 时，内容会在脚本被删除之前传递给 .html()。这会在脚本 block 被丢弃之前执行它们。但是，如果调用 .load() 时将选择器表达式附加到 URL，则脚本会在更新 DOM 之前被删除，因此不会被执行。下面是这两种情况的示例:

在这里，作为文档的一部分加载到 #a 中的任何 JavaScript 都将成功执行。

$( "#a" ).load( "article.html" );

但是，在以下情况下，正在加载到 #b 中的文档中的脚本 block 将被剥离而不执行:

$( "#b" ).load( "article.html #target" );