试图“固定”可排序的jQuery <li>，意外行为</li>

Question

故事

所以我正在尝试创建一个可排序列表，其中每个项目都可以在按下按钮或其他事件时“固定”，从而导致固定项目变得不可分割并保持其在列表中的位置。到目前为止，我已经到了为可排序元素添加一个类的地步：

$(".test").click(function(){
  //alert($(event.target).parent("li").text());        
  $(event.target).parent("li").toggleClass("static");
});

通过将此click函数绑定到每个li.free

中的a.test元素，可以解决此问题

<ul id="sortable">
<li class="free">oranges<a href="#" class="test">click</a></li>
<li class="free">apples<a href="#" class="test">click</a></li>
<li class="free">bananas<a href="#" class="test">click</a></li>
<li class="free">pineapples<a href="#" class="test">click</a></li>
<li class="free">grapes<a href="#" class="test">click</a></li>
<li class="free">pears<a href="#" class="test">click</a></li>
<li class="free">mango<a href="#" class="test">click</a></li>
</ul>​

这会切换li中的“.static”类，它应该允许可排序函数忽略标记为这样的项。我使用函数中的更改处理程序来解释更改：

$("#sortable").sortable({
  items: ':not(.static)',
  start: function(){
    $('.static', this).each(function(){
        var $this = $(this);
        $this.data('pos', $this.index());
    });
  },
  change: function(){
    $sortable = $(this);
    $statics = $('.static', this).detach();
    $helper = $('<li></li>').prependTo(this);
    $statics.each(function(){
        var $this = $(this);
        var target = $this.data('pos');

        $this.insertAfter($('li', $sortable).eq(target));
    });
    $helper.remove();
  }
}).disableSelection();

问题

所以我遇到的问题是，虽然它首先按预期运行，但可以通过移动它们上方的活动可排序元素来移动固定元素，从而将固定元素推向列表。任何想法都会受到欢迎。

jsFiddle

点击here获取jsFiddle示例。

编辑!!!

所以在进一步测试中我发现了另一个问题......这个脚本似乎根本不适用于Firefox。我还有其他的工作要做，所以我会在几个小时内回来看看，感谢您提出的任何建议。

Answer 1

只需在点击事件上传递事件参数，如下所示：

$(".test").click(function(event){
        //alert($(event.target).parent("li").text());        
        $(event.target).parent("li").toggleClass("static");
    });

我认为就是这样