Bug Tracker

Ticket #4383: test.htm

File test.htm, 2.4 KB (added by Blak, 11 years ago)

Test case

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4        <title>append / appendTo inconsistancy</title>
5
6        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
7       
8        <script type="text/javascript">
9        $(document).ready(function () {
10                //Works
11                var button = $("<input type='button' value='Click Me!' />").click(function(){
12                        alert("hello");
13                });
14
15                button.appendTo("#appendto div");
16
17               
18                //Doesn't Work
19                var button2 = $("<input type='button' value='Click Me!' />").click(function(){
20                        alert("hello");
21                });
22
23                $("#append div").append(button2);
24
25               
26                //Does Work
27                var button3 = $("<input type='button' value='Click Me!' />").click(function(){
28                        alert("hello");
29                });
30
31                $("#appendsingle div:first").append(button3);
32        });
33        </script>
34</head>
35
36<body>
37        <p>Note: this bug only seems to be valid in browsers that use <em>addEventListener</em>. Browsers that use <em>attachEvent</em> (i.e. IE) appear to be unaffected.</p>
38        <div id="appendto">
39                <h2>Using <em>button.appendTo("#appendto div")</em> - Works as expected</h2>
40                <div>
41                        <p>Here is a p tag, after this (but within the containing div) a button shall be appended, click it and an event fires</p>
42                </div>
43               
44                <div>
45                        <p>Here is another p tag, after this (but within the containing div) a button shall be appended, click it and an event fires</p>
46                </div>
47        </div>
48       
49        <hr>
50       
51        <div id="append">
52                <h2>Using <em>$("#append div").append(button2)</em> - Doesn't work as expected: click event is not bound</h2>
53                <div>
54                        <p>Here is a p tag, after this (but within the containing div) a button shall be appended, however it's click event is not bound</p>
55                </div>
56               
57                <div>
58                        <p>Here is another p tag, after this (but within the containing div) a button shall be appended, however it's click event is not bound</p>
59                </div>
60        </div>
61       
62        <hr>
63       
64        <div id="appendsingle">
65                <h2>Using <em>$("#append div:first").append(button3)</em> - Works as expected: but only because we are appending to 1 element</h2>
66                <div>
67                        <p>Here is a p tag, after this (but within the containing div) a button shall be appended, click it and an event fires</p>
68                </div>
69               
70                <div>
71                        <p>Here is another p tag, The button should not be appended to this p tag</p>
72                </div>
73        </div>
74
75</body>
76</html>