[jQuery] Removing an element from Droppable with N elements triggers N times the event.
Hi all.
My situation: I've a droppable div that I use for querying a database.
Everytime I drag-drop an element to this droppable div, it updates the
query.
Following the same idea, if I remove an element from this div, it
should update the query (deleting the removed element from the query).
The droppable code is:
$my_droppable.droppable({
accept: '.cloud > li',
activeClass: 'ui-state-highlight',
drop: function(ev, ui) {
addTagToMyDroppable(ui.draggable);
}
});
And the handler for the remove:
$('.cloud > li').click(function(ev) {
var $item = $(this);
var $target = $(ev.target);
alert("pre-deleting");
if ($target.is('a.ui-icon-search')) {
addTagToMyDroppable($item);
} else if ($target.is('a.ui-icon-trash')) {
removeFromMyDroppable($item);
}
return false;
});
Suppose that the droppable div has already 2 elements on it, and that
removeFromMyDroppable() has an alert("deleting").
When I remove a single element, the alert dialog prints:
pre-deleting
pre-deleting
deleting
deleting
and then it updates the query twice, duplicating the query results.
The same happens with more elements: if there were three elements,
then three events will occur.
Of course, what I want is to trigger the event only once.
Any ideas?
Thank you very much in advance.