Jquery 为什么类的切换只对一些元素起部分作用，而不总是相同的？

我已经尝试使用jQuery和jQueryUI实现一个类似于中的选择列表

要将multiselect和sortable结合起来，我有一个函数，可以在单击时切换类，并允许用户使用ctrl按钮选择多个元素

排序、选择和在列表之间移动都很好，但现在我必须实现与使用按钮拖放相同的功能

现在我的问题是，如果我向上移动一个项目（使用按钮！），切换就不再有效，或者只是部分无效

有人能帮我吗

我为此创建了一个提琴，但是按钮的函数没有调用，我也不知道为什么

编辑：

处理更少的代码：

我的代码：

Javascript/jQuery：

  var selectedList = new Array();
  var selectedChoice = new Array();
  var selected = new Array();

  jQuery(function() {
      jQuery('#liste, #auswahl').sortable({
          connectWith:".ui-picklist-list",
      });

      jQuery('#liste, #auswahl').children().click( function (eventObject){
          if(!eventObject.ctrlKey) {
              jQuery(".ui-picklist-item").removeClass("ui-state-highlight");
          }
          jQuery(this).toggleClass("ui-state-highlight");
      });

  });

  function initMultiselect(){
      jQuery('#liste, #auswahl').children().click( function (eventObject){
          if(!eventObject.ctrlKey) {
              jQuery(".ui-picklist-item").removeClass("ui-state-highlight");
          }
          jQuery(this).toggleClass("ui-state-highlight");
      });
  }

  function hasClass(element, cls) {
      var r = new RegExp('\\b' + cls + '\\b');
      return r.test(element.className);
  }



  function moveUp(id){
      for(var i=1; i<document.getElementById(id).getElementsByTagName("li").length; i++){
          if(hasClass(document.getElementById(id).getElementsByTagName("li")[i],"ui-state-highlight")){
              var e1 = document.getElementById(id).getElementsByTagName("li")[i];
              var e2 = document.getElementById(id).getElementsByTagName("li")[i-1];

              if(e1 && e2) { //nodes found
                  var parent = e1. parentNode;
                  var clones = [
                   e1. cloneNode(true),
                   e2. cloneNode(true)
                  ];
              //toggle (replace nodes)
              parent. replaceChild(clones[1], e1);
              parent. replaceChild(clones[0], e2);
              }
          }
      }

      jQuery('#'+id).children().click( function (eventObject){
          if(!eventObject.ctrlKey) {
            jQuery(".ui-picklist-item").removeClass("ui-state-highlight");
          }
          jQuery(this).toggleClass("ui-state-highlight");
      });    
  }

---

好的，我发现了错误。当我克隆列表元素以在列表中上下移动或移动到另一个列表时，单击事件会丢失，因此每次移动一个或多个项目后我都会初始化它。由于某些列表项具有不止一个单击功能，所以当我单击它们时，它们有偶数个单击事件，看起来好像没有触发单击事件，因为类在同一时刻切换，然后再次切换

当我拖放这些元素时，它们没有突出显示的问题是，单击事件只是在按下鼠标按钮时触发的，而不仅仅是在按下鼠标按钮时释放

解决方案： 移动一个或多个列表项后，我调用一个函数来执行以下操作：

      jQuery([all my picklist items]).unbind('mousedown');
      jQuery([all my picklist items]).mousedown( function (eventObject){
           if(!eventObject.ctrlKey) {
              jQuery(".ui-picklist-item").removeClass("ui-state-highlight");
           }
           jQuery(this).toggleClass("ui-state-highlight");
      });

---

好的，我发现了错误。当我克隆列表元素以在列表中上下移动或移动到另一个列表时，单击事件会丢失，因此每次移动一个或多个项目后我都会初始化它。由于某些列表项具有不止一个单击功能，所以当我单击它们时，它们有偶数个单击事件，看起来好像没有触发单击事件，因为类在同一时刻切换，然后再次切换

当我拖放这些元素时，它们没有突出显示的问题是，单击事件只是在按下鼠标按钮时触发的，而不仅仅是在按下鼠标按钮时释放

解决方案： 移动一个或多个列表项后，我调用一个函数来执行以下操作：

      jQuery([all my picklist items]).unbind('mousedown');
      jQuery([all my picklist items]).mousedown( function (eventObject){
           if(!eventObject.ctrlKey) {
              jQuery(".ui-picklist-item").removeClass("ui-state-highlight");
           }
           jQuery(this).toggleClass("ui-state-highlight");
      });

---

因为当你拖动的时候你没有点击，你应该在拖动结束后触发点击，我认为这是一个叫做

stop

的选项，当我拖放东西的时候它不会被突出显示。我的问题是，当我使用按钮执行此操作时，切换不再起作用。如果JSFIDLE发生故障，您应该始终在问题中包含代码。还有，里面有大量的代码。您能用更少的代码重现错误吗？您可以尝试使用jQuery而不是

onclick

属性来添加事件处理程序。@Blaise:也许您可以告诉我怎么做。我不能让它工作。因为当你拖动的时候你没有点击，你可能应该在拖动结束后触发点击，我认为这是一个叫做

stop

的选项，当我拖放东西的时候它不会突出显示。我的问题是，当我使用按钮执行此操作时，切换不再起作用。如果JSFIDLE发生故障，您应该始终在问题中包含代码。还有，里面有大量的代码。您能用更少的代码重现错误吗？您可以尝试使用jQuery而不是

onclick

属性来添加事件处理程序。@Blaise:也许您可以告诉我怎么做。我不能让它工作。

      jQuery([all my picklist items]).unbind('mousedown');
      jQuery([all my picklist items]).mousedown( function (eventObject){
           if(!eventObject.ctrlKey) {
              jQuery(".ui-picklist-item").removeClass("ui-state-highlight");
           }
           jQuery(this).toggleClass("ui-state-highlight");
      });