Bug Tracker

Ticket #5057: index.html

File index.html, 2.9 KB (added by agate, 11 years ago)

jquery html() remove all the children's events

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html>
3  <head>
4    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
5    <title>jquery html issue</title>
6    <style type="text/css" media="screen">
7      #container {
8        border: 1px solid;
9        background-color: red;
10        width: 80px;
11      }
12      #child {
13        border: 1px solid;
14        margin: 20px 0 0 20px;
15        background-color: blue;
16        height: 60px;
17      }
18      #debug {
19        border: 1px solid;
20        width: 600px;
21      }
22    </style>
23    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
24    <script type="text/javascript" language="javascript" charset="utf-8">
25    //<![CDATA[
26      var testHtml    = '<div id="container"><div id="child">click me</div></div>';
27      var jqTest      = null;
28      var jqDebug     = null;
29
30      var jqContainer = null;
31      var jqChild     = null;
32
33      var jqBtnHtml   = null;
34      var jqBtnInner  = null;
35      var jqBtnReset  = null;
36
37      $(document).ready(function () {
38        jqTest     = $('#test');
39        jqDebug    = $('#debug');
40        jqBtnHtml  = $('#btnHtml').click(function () { useHTML(); });
41        jqBtnInner = $('#btnInner').click(function () { useINNERHTML(); });
42        jqBtnReset = $('#btnReset').click(function () { reset(); });
43
44        reset();
45      });
46
47      function reset () {
48        jqTest.html(testHtml);
49        jqDebug.html('== reset ==<br/>please click the div("click me"), you will see the alert.');
50
51        jqBtnHtml.attr('disabled', false);
52        jqBtnInner.attr('disabled', false);
53
54        jqContainer = $('#container');
55        jqChild     = $('#child').click(function () { alert('clicked'); });
56      }
57
58      function useHTML () {
59        // use html('')
60        jqContainer.html('');
61        jqContainer.append(jqChild);
62
63        jqBtnHtml.attr('disabled', true);
64        jqBtnInner.attr('disabled', true);
65
66        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.');
67      }
68
69      function useINNERHTML () {
70        // use innerHTML
71        jqContainer[0].innerHTML = '';
72        jqContainer.append(jqChild);
73
74        jqBtnHtml.attr('disabled', true);
75        jqBtnInner.attr('disabled', true);
76
77        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.');
78      }
79    //]]>
80    </script>
81  </head>
82  <body>
83    <div id="test"></div>
84    <input type="button" id="btnHtml" value="use html()" />
85    <input type="button" id="btnInner" value="use innerHTML" />
86    <input type="button" id="btnReset" value="Reset" />
87    <div id="debug"></div>
88  </body>
89</html>