Ticket #4953: jq-ui-sortable.html

File jq-ui-sortable.html, 1.6 KB (added by sergiopereira, 13 years ago)

Repro

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<html>
3 <head>
4  <title> jquery / jquery UI bug? </title>
5  <script src="jquery-1.3.2.js"></script>
6  <script src="jquery-ui-1.7.full.js"></script>
7  <script>
8  $( function() { 
9
10                $('.sortableRows').sortable();
11
12                $('.otherButton').live('click', function(){alert('live clicked');});
13                $('.otherButton').click(function(){alert('normal clicked');});
14
15                $('.sortableRows .selectButton').click(function(){alert('#1 - normal clicked');});
16                $('.sortableRows .selectButton').live('click', function(){alert('#2 - live clicked');});
17
18                $('table').click( function(evt){
19                        if( $(evt.target).is('.selectButton')){
20                                alert('#3 - normal click on parent table');
21                        }
22                });
23
24                $('table').live('click', function(evt){
25                        if( $(evt.target).is('.selectButton')){
26                                alert('#4 - live click on parent table');
27                        }
28                });
29  });
30
31  </script>
32
33 </head>
34
35 <body>
36 Open this page in IE (I tried on IE8)<br>
37 Click any of the Select and the Otehr button and see they work.<br>
38 Now drag one of the yellow table rows to change its position<br>
39 Try clicking one of the Select buttons again: On the very first click only the handler #1 fires.
40                <table border=1>
41                        <tbody class="sortableRows">
42                                <tr style="background-color:#ff9;">
43                                        <td>row 1</td>
44                                        <td><input type="button" class="selectButton" value="Select"></td>
45                                </tr>
46                                <tr style="background-color:#ff9;">
47                                        <td>row 2</td>
48                                        <td><input type="button" class="selectButton" value="Select"></td>
49                                </tr>
50                        </tbody>
51                </table>
52 </body>
53 <input type="button" class="otherButton" value="Other">
54</html>