Question

我这样做：

$("#id1").html(data);

我用html重新填充div，但是当我尝试获取这个重新填充的div的孩子的html时，我得到一个空字符串，虽然它有，但是就像旧的孩子仍然存在但没有html。

编辑：我试图重现我的问题，这里是html :(在重新填充时点击2次，点击打开后你就会发现什么都不会发生）

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
    <link type="text/css" rel="stylesheet"  href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/dot-luv/jquery-ui.css"/>
</head>
<body>

<script type="text/javascript">
    $(function(){
        $("#r1").click(function(){
        var x = $("#main").html();
        $("#main").html(x);
        });
    });

</script>
<a href="#" id="r1">refill</a>

<div id="main">
<a id="a1" href="#" >open</a>
<script type="text/javascript">
$(function(){
$("#a1").click(function(){$("#forDialog").dialog();});
$("#a2").click(function(){$("#forDialog").dialog('close');});
});
</script>

<div id="forDialog">
hi
    <a id="a2" href="#" >close</a>
</div>
</div>
</body>
</html>

我正在动态生成这个javascript，所以注册a1.click和a2.click的脚本需要在主div内

Answer 1

我不太确定您的代码的确切目标，但我可以提出3个一般性建议：

使用 .delegate() 附加到曾经和未来的元素。
您可以 .hide() 为您提供HTML对话框。
您可以在使用该链接的点击处理程序中的 event.preventDefault(); 点击链接时阻止页面刷新。

将这些建议应用于您的代码会产生以下工作代码：

<script type="text/javascript">

    $("body").delegate("#a1", "click", function(){
        $("#forDialog").dialog();
    });

    $("body").delegate("#a2", "click", function(){
        $("#forDialog").dialog('close');
    });

    $(function(){
          // Hide HTML for the dialog.
        $("#forDialog").hide();

        $("#r1").click(function(event){
            var x = $("#main").html();
            $("#main").html(x);
              // If you don't want the page to refresh by clicking
              //   on this A element, use the following:
            event.preventDefault();
        });
    });

</script>
<a href="#" id="r1">refill</a>

<div id="main">
    <a id="a1" href="#" >open</a>
    <div id="forDialog">
        hi
        <a id="a2" href="#" >close</a>
    </div>
</div>

的 jsFiddle example

Answer 2

使用.html(stuff)重置内容后，元素下的旧子DOM将会消失。它可能存在于某个地方的内存中，但是它与DOM分离，你无法获得它。

$（'＃id1'）。html（“”）从DOM中删除＃id1的所有子项，或者它们仍在那里？

2 个答案:

的 jsFiddle example