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

jQuery:html(数据)未清除现有元素,jquery,Jquery,我有三个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-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>
$(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
元素,那么我将使用
ajax
在第三个
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>
$(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(数据)
没有清除现有数据,因此我在
$(“div#branch-3”).html(数据)之前尝试过以下语句

如果我将上述
选择器
div#branch-3
更改为
div#branch-3 ul
div#branch-3 li
则上述所有语句都运行良好

  • 为什么
    html(数据)
    无法替换现有数据
  • 更改
    selector
    后,尽管我将
    父元素id
    传递为
    选择器
  • 添加了其他信息:正如我在上面所说的有时
    。html(数据)
    不会清除现有数据,以下就是这种情况

    假设为
    Parent-1
    有两个孩子,比如说
    child-1,child-2
    ,同样
    child-1
    有两个孩子
    A,B
    child-2
    有三个孩子
    X,Y,Z
    。想想如果用户点击
    child-2
    ,那么
    X,Y,Z
    就会显示在
    分支-3 div中,再次,如果用户单击
    Child-1
    ,则
    X,Y
    将替换为
    A,B
    ,但
    Z
    仍然存在。如果我试图在firebug中指出它的(Z)位置,那么它就会消失。

    试试这个-

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

    实际上,正如我所想,您的问题是-
    success
    函数没有被调用。要检查此想法是否正确,请向您的成功添加警告(“我加入!”):

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

    你的意思是它将新数据与旧内容合并,而不是替换它?或者它根本不改变数据?我从未尝试过这样的行为,我在我的web应用程序中使用了大量的.html()和.empty()。你确定你的回拨电话打得很好吗?您是否尝试过使用控制台(F12)创建调试断点?@Barmar:假设我有两个child(child-1,child-2)作为Parent-1,child-1有两个child(a,B),child-2有三个child(X,Y,Z)。如果用户单击child-2,则
    X,Y,Z
    显示在
    branch-3
    div中,如果用户单击child-1,则显示X,Y将替换为A,B,但Z仍然存在。如果试着在firebug中指出它的(Z)位置,那么它就会消失。我很难理解这个解释。你能在问题中显示实际结果吗?@Barmar:一旦检查,我就更新了问题,无论我如何才能得到我想要的,但是我想知道它异常行为的原因在我看来,
    chorme和FF
    中的检查就像jQuery或浏览器的版本问题,
    ajax
    调用没有问题我已经检查了您的建议,我正在从
    ajax
    调用中获取数据。是否调用了警报(“我在!”?