Home/ Questions/Q 3235350
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T17:29:48+00:00

I do something like this: $(#id1).html(data); I refill a div with html but when

  • 0

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/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>

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    1. Use .delegate() to attach to once and future elements.
    2. You can .hide() the HTML for you dialog box.
    3. 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

    • 0