Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#3023 closed bug (fixed)

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({});

Change History (2)

comment:1 Changed 11 years ago by paul

Resolution: fixed
Status: newclosed

comment:2 Changed 11 years ago by antin

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.

Note: See TracTickets for help on using tickets.