javascript - jQuery UI 的可排序更新事件未触发

Question

我正在使用 jQuery UI 的 Sortable，我想在更新时调用一个函数。这是我现在正在尝试的代码。

$(".sortable").sortable({
    handle: '.handle'
    , start: function (event, ui) {
        console.log('started sorting ' + $(event.srcElement).index());
        prev_sortable_index = $(event.srcElement).index();
        $('.sortable li:not(.ui-state-highlight)').each(function () {
            prev_list_elements.push($(this));
            new_sort_order.push($(this).index());
        });
        console.log(new_sort_order);
    }
    , update: function (event, ui) {
        alert("testing");
    }
});

排序后，我没有收到提醒消息。如果我将“更新”移动到“开始”上方，我会得到相同的结果。我尝试将警报添加到开始事件、停止事件和更新事件。我没有收到任何错误或警告，只是更新事件似乎没有触发。我还确保没有任何 preventDefault 或 stopPropagation 干扰我的目标元素。

编辑:添加 HTML

<ul class="sortable no-margin no-padding" style="list-style:none;">
   <li class="item green-row"><span class="handle"><img src="~/Images/handle.png" style="width:14px; margin-top:2px;" /></span>
       <table style="width:97%;">
          <tr style="background:none;">
             <td style="width:130px;">Plan Check Fee</td>
             <td style="width:120px;">Plan Check</td>
             <td style="width:80px;">-</td>
             <td style="width:103px;">$1200.00</td>
             <td style="width:113px;">-</td>
             <td style="width:92px;">$100.00</td>
             <td style="width:100px;">$1100.00</td>
             <td style="width:88px;">$1100.00</td>
          </tr>
       </table>
    </li>
    <li class="item green-row"><span class="handle"><img src="~/Images/handle.png" style="width:14px; margin-top:2px;" /></span>
       <table style="width:97%;">
          <tr style="background:none;">
             <td style="width:130px;">Plan Check Fee</td>
             <td style="width:120px;">Plan Check</td>
             <td style="width:80px;">-</td>
             <td style="width:103px;">$1200.00</td>
             <td style="width:113px;">-</td>
             <td style="width:92px;">$100.00</td>
             <td style="width:100px;">$1100.00</td>
             <td style="width:88px;">$1100.00</td>
          </tr>
       </table>
    </li>                                               
</ul>

Answer 1

我终于能够解决我的问题，事实证明这是 JavaScript 引用中的冲突。我以前使用 jquery.sortable.js，然后回过头来使用 jQuery UI 的排序功能，但未能删除对 j​​query.sortable.js 的引用。