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");
    }
});

排序后，我没有收到提示信息。如果我将'update'移到'start'上方，我会得到相同的结果。我已尝试将警报添加到启动事件，停止事件和更新事件。我没有得到任何错误或警告，只是更新事件似乎没有触发。我还确保没有任何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排序的排序功能，但未能删除对jquery.sortable.js的引用。

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

1 个答案: