Question

我今天遇到了一个奇怪的问题：我创建了一个可排序的div列表。每个div都有一个class =“class1”，items设置为'class1'（参见下面的简化代码）。每个div都有一个调用函数toggleLock的href链接。对于该div，此函数将class =“class1”替换为class =“locked”。例如：将成为

问题是：即使#sortable设置为“make”只有class =“class1”可排序的项目，替换该类仍然允许可排序。似乎项目类在某些时候被缓存。

我试图刷新#sortable（$（'#sableable'）。sortable（“refreshPosition”）和$（'#sableable'）。sortable（“”）;），但这不起作用。
我尝试了两种替换类的方法：attr（'class'，'lock'）和removeClass（），然后是addClass（）。仍然可以排序。
如果类没有动态更改，但是加载到DOM中，那么它就不能按预期排序。

为什么不将类从class1替换为lock来防止div被排序？我错过了什么吗？

示例代码：

<div id="sortable">
       <div class="class1" id="1">
          <div class="sortHandle">....</div>
               <href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R1">lock</a>
              <p>This is item 1</p>
       </div>
       <div class="class1" id="2">
              <div class="sortHandle"></div>
               <href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R2">lock</a>
              <p>This is item 2</p>
       </div>
       <div class="class1" id="3">
              <div class="sortHandle"></div>
             <href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R3">lock</a>
              <p>This is item 3</p>
       </div>
 </div>

JS：

$(function() {
   $("#sortable").sortable({
    items: '.class1',
    handle: '.sortHandle',
    cursor: 'move',
    start: function(e,ui) {
     el = e.target;
     startPos = ui.item.prevAll().length+1;
    },
     update: function(event, ui) {
     data = $('.class1').sortable('toArray');
     newPos = ui.item.prevAll().length+1;
     alert("position: "+startPos+"; newposition: "+newPos);
    }
   }).disableSelection();
  });

Answer 1

更改类不会使项目无法解决，因为数据已经附加到它上面。最简单（不是最好）的方法是在使用.unbind（）更改类时从元素中清除处理程序最好是在更新类名后重新初始化可排序 - 这将确保您不会因为不断修改DOM而失去性能

jquery可排序项缓存？ #sortable items：当动态更改类时，'。class1'过滤器不起作用

1 个答案: