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

Question

故事

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

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

通过将此点击函数绑定到每个 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");
    });

我觉得就是这个