Код ниже (надеюсь) - это минимизированный тестовый пример моей первоначальной проблемы. Я пытаюсь настроить систему, в которой вы перетаскиваете элементы списка из левого меню (перетаскиваемые элементы), а затем перетаскиваете их в поле справа. Как только они будут удалены, вы сможете щелкнуть текст «перетаскиваемый элемент» и развернуть их наборы полей.
Проблема, однако, в том, что после того, как вы уронили предметы и нажали, чтобы развернуть их (скажем, у вас есть 3 предмета), первый из них даст вам 3 окна с предупреждениями, второй даст вам 2 и последний только даст вам 1. Другими словами, сверху, он даст вам x блоков оповещений (где X - количество элементов).
Глядя на код, я действительно не могу понять, почему это происходит, за исключением того, что кажется, что содержимое .click внутри stop: кажется связанным, учитывая тот факт, что пример на http://api.jquery.com/click/ отлично работает.
(Кстати: материал внутри окна предупреждения должен быть идентификатором элемента, который вы щелкнули.)
Есть идеи?
<!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>