Question

我有三个div元素如下

<div id='branch-1'>
   <ul>
     <li><span>Parent-1</span></li>
     <li><span>Parent-2</span></li>
     <li><span>Parent-3</span></li>
   </ul>
</div>
<div id='branch-2'></div>
<div id='branch-3'></div>

如果用户点击div，那么第一个Parent-1元素将会加载页面，然后其子项将在第二个div加载，类似于Parent-2 and Parent-3，使用{{1}如下。

ajax

再次，如果用户点击第二个$("div#branch-1 ul li span").click(function () { $.ajax({ type: 'POST', url: url, data: data, dataType: 'html', async: false, success: function (data) { $("div#branch-2").html(data); $("div#branch-3").empty(); } }); });元素，那么我将使用div在第三个div中加载其子元素，如下所示

ajax

实际问题：有时$(document).on("click", "div#branch-2 ul li span"function () { $.ajax({ type: 'POST', url: url, data: data, dataType: 'html', async: false, success: function (data) { $("div#branch-3").html(data); } }); });未清除现有数据，因此我在$("div#branch-3").html(data);

之前尝试过以下语句

$("div#branch-3").html(data);

如果我将$("div#branch-3").html(""); // Not worked //OR $("div#branch-3").empty(); // Not worked //OR $("div#branch-3").contents().remove(); // Not worked从selector更改为div#branch-3或div#branch-3 ul或div#branch-3 li，则以上所有陈述均可正常运作，

为什么div#branch-3 span无法替换现有数据？
更改html(data)之后，为什么要清除现有元素，我将selector作为parent element id

添加了其他信息：正如我上面所说有时 selector未清除现有数据，以下情况

假设.html(data)有两个孩子可以说Parent-1，Child-1,Child-2有两个孩子Child-1而A,B有三个孩子Child-2。想一想，如果用户点击X,Y,Z，那么Child-2会在X,Y,Z显示正常，如果用户点击branch-3 div，那么Child-1将替换为X,Y但是A,B仍然存在。如果我试图将其（Z）位置指向萤火虫，那么它就会消失。

Answer 1

试试这个 -

$("div#branch-3").html(markUp).trigger("create");

Answer 2

实际上我认为，你的问题是 - success函数没有被调用。检查是否正确的想法为您的成功添加警报（“我在！”）：

    success: function (data) {
        alert("I'm in!");
        $("div#branch-3").html(data);
    }

jQuery：html（数据）不清除现有元素

2 个答案: