jQuery: html(数据)未清除现有元素

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，使用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元素，那么我将使用ajax将其子元素加载到第三个div中，如下所示

$(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，那么所有这些语句都正常工作，

1. 为什么html(data)不能替换现有的数据？
2. 更改selector之后，为什么要清除现有的元素，尽管我要将parent element id作为selector传递

添加了附加信息：，正如我前面所说的，有时 .html(data)没有清除现有数据，如下所示

假设Parent-1有两个子节点--例如Child-1,Child-2，如果用户单击Child-2，Child-1有两个子级A,B，Child-2有三个子级X,Y,Z.Think --那么X,Y,Z在branch-3 div中显示的很好，如果用户单击Child-1，那么X,Y将替换为A,B，但Z仍然存在。如果我试图指出它(Z)在firebug中的位置，那么它就消失了。

Answer 1

试试这个-

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

Answer 2

实际上，正如我所想的，您的问题是- success函数没有被调用。要检查是否正确，请添加警报(“我加入了！”)给你你的成功：

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