Below is a demo of the problem i have. Reduced to the minimal HTML I
think.
I start with a row in a table, but on load, I remove it and store it.
Then i dynamically insert some row based on a clone of the original.
As I add each row i add a double-click to a popup form (via blockUI).
The first time you double click a row it works. The second time
everything freezes during the popup.
There must be some rules around row removal and re-adding, or
dynamically attaching a dblclick(..) event that I'm unaware of.
What am I missing ?
- Paul
------
<html>
<title>jQuery bug demo?</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.blockUI.min.js"></script>
<script>
$(document).ready(function() {
// take row from table, for futire use.
rowToClone = $('#mytable tr:last').remove();
insertRow("1", "double-click this line first");
insertRow("2", "then double-click this line");
$("#cancelRead").click(function() {
document.readMyForm.reset();
$.unblockUI();
});
});
function doubleClick() {
var readRow = $('#readRow');
$.blockUI(readRow, {width:'540px', height:'300px'});
}
function insertRow(id, foo) {
var newRow = rowToClone.clone();
newRow.attr("id", id);
$('td[class*=class1]', newRow).html(foo);
newRow.dblclick(doubleClick); // Is this an OK thing to
do ????
$('#mytable').append(newRow);
}
</script>
<body>
<table id=mytable cellpadding=0 cellspacing=0>
<tbody>
<tr class="myRow" id="1">
<td class="class1">PLACEHOLDER</td>
</tr>
</tbody>
</table>
<div id=readRow style="display:none;cursor:default;">
<h2>Hello!</h2>
<form id=readMyForm name=readMyForm>
<input type=button id=cancelRead value="Close">
</form>
</div>
</body>
</html>
