每当将新的li添加到ul时如何调用函数？

Question

这里是新的 li 将被丢弃的 ul：

 <ul id="sortable2" class="connectedSortable">
   <li class="ui-state-default li-cat">Appetizers</li>
   <li class="ui-state-default li-cat">Soups</li>
  </ul>

这里是 ul 将被拖动的地方：

 <ul id="sortable1" class="connectedSortable">
   <li class="ui-state-default ap dd">Cobb Salad</li>
   <li class="ui-state-default soup dd">Gazpacho</li>
   <li class="ui-state-default salad dd">Prime Rib</li>
 </ul>

jqueryui 函数连接两个列表：

 $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
    }).disableSelection();
  });

每当向 ul 添加新元素 (li) 时，我只想调用一个 javascript 函数。我正在使用可排序的 jqueryui 进行拖放。

Answer 1

在 jquery sortable 中使用 change 属性，所以当可排序列表发生变化时，这个 change 属性会自动触发.....

 (function($) {
   var beforeChangeUlLen = $("#sortable2").length;
   $( "#sortable1, #sortable2" ).sortable({
        connectWith: ".connectedSortable",
        change: function(){
              var afterChangeUlLen = $("#sortable2").length;
              if(beforeChangeUlLen > afterChangeUlLen){
                  /*Add you function after new li is added to ul*/
              }
         }
     }).disableSelection();
 })(jQuery);