The code below is (hopefully) a minimized testcase of my original problem. I'm trying to set up a system where you drag list items from the left menu (draggable items) and then drop'em to the box on the right hand side. Once they're dropped, you should be able to click the "draggable item" text and expand their fieldsets.
The problem is, however, that once you have dropped the items and clicked to expand them (say you have 3 items), the first one will give you 3 alert boxes, the second one will give you 2 and the last one will only give you 1. In other words, from the top, it will give you x alert boxes (where X is the number of items).
Looking at the code, I really can't figure out why this happens, other than it seems that having the .click stuff inside stop: seems to be related, given the fact that the example on http://api.jquery.com/click/ works fine.
(BTW: The stuff inside the alert box is supposed to be the ID of the item you clicked.)
Any ideas?
<!doctype>
<html>
<head>
<title>testcase</title>
<style type="text/css">
body { padding: 50px; font-family: Arial; font-size: .9em }
#column, #data { float: left }
#column { width: 13% }
ul, ol { padding: 0; border: 0 }
li { list-style: none }
.droptarget { padding: 10px; border: 1px solid #999; height: 10px; width: 350px; margin-right: 1.2% }
.ui-draggable-dragging, .ui-sortable-helper { background: #f90; width: 100px; display: block }
</style>
<script src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
function hideAllElements() {
var elements = $('.dtContent');
var elementsLength = elements.length
for (var j = 0; j < elementsLength; j++) {
elements[j].style.display = 'none';
}
}
var randNum = 0;
function randNoDups() {
tmpRand = randNum;
while (tmpRand == randNum) {
tmpRand = Math.round(Math.random() * 50000000);
}
randNum = tmpRand;
return tmpRand;
}
$(function () {
var i = 0;
$(".draggable").draggable({
connectToSortable: ".sortable",
helper: 'clone'
});
$(".contentGroupList").sortable({
connectWith: '.contentGroupList',
stop: function (event, ui) {
var currentId = ui.item.children(0).attr('id');
var currentNumber = currentId.split("dt");
var randomKey = randNoDups();
ui.item.children(0).attr({
id: ui.item.children(0).attr('id') + randomKey
});
if ((i + 1) == $('.droptarget').children().size()) {
hideAllElements();
var $formContainer = $('<fieldset>').addClass('dtContent').attr({
id: 'fs' + currentNumber[1] + randomKey
});
var $table = $('<table>').appendTo($formContainer);
var $submit = $('<input>').attr({type: 'submit'}).appendTo($formContainer);
ui.item.append($formContainer);
ui.item.attr({id: 'listItem' + i});
$("span").click(function () { alert($(this).attr('id')); });
i++;
}
}
});
});
</script>
</head>
<body>
<div id="column">
<ul id="draggables">
<li class="draggable"><span class="dt" id="dt0">Draggable item</span></li>
</ul>
</div>
<div id="contentGroups-1" class="contentGroup">
<ul class="droptarget sortable contentGroupList"></ul>
</div>
</body>
</html>