0

我有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元素，那么我将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-3todiv#branch-3 ul或div#branch-3 lior更改为以上div#branch-3 span所有语句都可以正常工作，

  1. 为什么html(data)不能替换现有数据？
  2. 在更改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仍然存在。如果我尝试在萤火虫中指向它的（Z）位置，那么它就会消失。

4

2 回答 2

0

尝试这个-

$("div#branch-3").html(markUp).trigger("create");
于 2013-04-16T06:46:37.567 回答
0

实际上，正如我所想，您的问题是 -success未调用函数。要检查这个想法是否正确，请向您添加 alert("I'm in!") 您的成功：

    success: function (data) {
        alert("I'm in!");
        $("div#branch-3").html(data);
    }
于 2013-04-16T07:09:47.630 回答