Bug Tracker

Ticket #5057: index.html

File index.html, 2.9 KB (added by agate, August 16, 2009 05:22AM UTC)

jquery html() remove all the children's events

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>jquery html issue</title>
    <style type="text/css" media="screen">
      #container {
        border: 1px solid;
        background-color: red;
        width: 80px;
      }
      #child {
        border: 1px solid;
        margin: 20px 0 0 20px;
        background-color: blue;
        height: 60px;
      }
      #debug {
        border: 1px solid;
        width: 600px;
      }
    </style>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" language="javascript" charset="utf-8">
    //<![CDATA[
      var testHtml    = '<div id="container"><div id="child">click me</div></div>';
      var jqTest      = null;
      var jqDebug     = null;

      var jqContainer = null;
      var jqChild     = null;

      var jqBtnHtml   = null;
      var jqBtnInner  = null;
      var jqBtnReset  = null;

      $(document).ready(function () {
        jqTest     = $('#test');
        jqDebug    = $('#debug');
        jqBtnHtml  = $('#btnHtml').click(function () { useHTML(); });
        jqBtnInner = $('#btnInner').click(function () { useINNERHTML(); });
        jqBtnReset = $('#btnReset').click(function () { reset(); });

        reset();
      });

      function reset () {
        jqTest.html(testHtml);
        jqDebug.html('== reset ==<br/>please click the div("click me"), you will see the alert.');

        jqBtnHtml.attr('disabled', false);
        jqBtnInner.attr('disabled', false);

        jqContainer = $('#container');
        jqChild     = $('#child').click(function () { alert('clicked'); });
      }

      function useHTML () {
        // use html('')
        jqContainer.html('');
        jqContainer.append(jqChild);

        jqBtnHtml.attr('disabled', true);
        jqBtnInner.attr('disabled', true);

        jqDebug.html('== use jquery html() function ==<br/>1. jqContainer.html("")<br/>2. jqContainer.append(jqChild)<br/>please click the div("click me"), you will not see the alert.');
      }

      function useINNERHTML () {
        // use innerHTML
        jqContainer[0].innerHTML = '';
        jqContainer.append(jqChild);

        jqBtnHtml.attr('disabled', true);
        jqBtnInner.attr('disabled', true);

        jqDebug.html('== use DOM innerHTML ==<br/>1. jqContainer[0].innerHTML = ""<br/>2. jqContainer.append(jqChild)<br/>please click the div("click me"), you will see the alert.');
      }
    //]]>
    </script>
  </head>
  <body>
    <div id="test"></div>
    <input type="button" id="btnHtml" value="use html()" />
    <input type="button" id="btnInner" value="use innerHTML" />
    <input type="button" id="btnReset" value="Reset" />
    <div id="debug"></div>
  </body>
</html>

Download in other formats:

Original Format