$('#id1').html(" ") removes all children of #id1 from DOM, or they are still there?_问答_开发者

$('#id1').html(" ") removes all children of #id1 from DOM, or they are still there?

开发者 https://www.devze.com 2023-01-18 01:04 出处：网络

I do something like this: $(\"#id1\").html(data); I refill a div with html but when I try to get the html of a child of this refilled div I get an empty string although it has, it\'s like the old c

I do something like this:

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

I refill a div with html but when I try to get the html of a child of this refilled div I get an empty string although it has, it's like the old child is still there but without html.

Edit: I tried to reproduce my problem, here is the html: (click 2x times on refill and after click open you will see that nothing is going to happen)

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascri开发者_JS百科pt" 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>

I'm generating this javascript dynamically so the scripts that register a1.click and a2.click need to be inside the main div

I'm not quite sure as to the exact goal of your code, but I can make 3 general suggesions:

Use .delegate() to attach to once and future elements.
You can .hide() the HTML for you dialog box.
You can prevent the page from refreshing when a link is clicked using event.preventDefault(); in the click handler of that link.

Applying those suggestions to your code results in the following working code:

<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

The old sub-DOM under the element will be gone after you reset its content with .html(stuff). It may exist floating around in memory somewhere, but it's detached from the DOM and you can't get at it.