Search and Top Navigation
#3023 closed bug (fixed)
Opened June 24, 2008 09:35PM UTC
Closed June 24, 2008 11:25PM UTC
Last modified November 03, 2008 12:30AM UTC
No events on sortable elements
| Reported by: | anonymous | Owned by: | paul |
|---|---|---|---|
| Priority: | major | Milestone: | 1.5.1 |
| Component: | ui.sortable | Version: | 1.5 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
Calling sortable on an element disables the events for anything
that is inside the element being sorted.
Example - The onclick alert events won't be fired when clicking on the links:
<ul id="widgets">
<li id="1_widget">
<a href="#" onclick="alert('hi');">yo</a>
</li>
<li id="1_widget">
<a href="#" onclick="alert('hi');">yo</a>
</li>
<li id="1_widget">
<a href="#" onclick="alert('hi');">yo</a>
</li>
</ul>
<script type="text/javascript">
$("#widgets").sortable({});
Attachments (0)
Change History (2)
Changed June 24, 2008 11:25PM UTC by comment:1
| resolution: | → fixed |
|---|---|
| status: | new → closed |
Changed November 03, 2008 12:30AM UTC by comment:2
Unfortunately this has not been completely fixed, specifically any events attached through jquery itself are still lost (after the item has been dragged).
The issue only arises when the events are bound to any child of the items being sorted (in the example above if you use jquery to bind a click event to the li then the event will be preserved after sort, however if you bind a click event to the a tag then it will be lost). This bug was introduced into jquery ui when the createPlaceholder function was reworked.
The issue is in the createPlaceholder function (line 306 in my version):
el.innerHTML = self.currentItem[0].innerHTML;
Previous versions of the createPlaceholder function merely placed an empty div, whereas the new version copies all the nested elements across. The issue arises once the element is dragged, when the clear function is called and the placeholder is removed from the dom (line 733):
this.placeholder.remove();
The issue is that the 'expando' attribute that jquery uses to tag elements gets copied across to the temporary placeholder element, and then when remove is called jquery finds that an event was bound for the same id and mistakenly deletes it from the real element.
Commenting out the offending line in createPlaceholder fixes the issue, alternatively when the innerHTML is copied all expando attributes could be stripped.