jQuery Выбираемый не работает в IE или Chrome

Question

У меня есть список выбора jQuery, у которого есть дескриптор, чтобы выбрать элемент из одного списка и поместить его в другой «выбранный» список. Это отлично работает в Firefox, но не работает вообще в Chrome и IE. Я не могу щелкнуть элемент, чтобы переместить его в выбранный список. Посмотрите мою скрипту в Firefox, которая отлично работает, а затем просмотрите ее в IE или Chrome и обратите внимание, что она больше не работает так, как ожидалось. (щелкните знак «плюс», чтобы добавить столбец в выбранный список).

JQuery код, чтобы перейти к выбранному списку:

$(function() { 
     $(".list") 
     .find("li") 
     .addClass("ui-corner-all") 
     .prepend("<div class='handle'><span class='ui-icon ui-icon-plus'></span></div>") 
     .selectable({ 
      handle: ".handle", 
      stop: function() { 
       var result = $("#select-result"); 

       $("ul li div").click(function() { 
        var index = $("ul li div").index(this); 
        var listLiText = $("ul.list li").eq(index).text(); 
        var listLiID = $("ul.list li").eq(index).attr('id'); 

        $("ul.list li").eq(index).css('background-color', '#669966'); 
        $("ul.list li").eq(index).css('color', '#FFFFFF'); 

        if ($("#select-result #" + listLiID).length == 0) { 
         result.append('<li id="' + listLiID + '">' + listLiText + '</li>'); 
        } 
        sortColumns(); 
       }); 
      } 
     }); 
    }); 

JS Скрипки (попробуйте сначала в FF, то в IE или Chrome): http://jsfiddle.net/kmbonin82/NkgC2/17/

Answer 1

Я нашел вашу проблему: вы используете «щелчок» после того, как вы уже «остановили» событие клика по выбору. Вы не можете нажать после того, как он остановил доступный щелчок. Если вы закомментируете щелчок, как показано ниже, он фиксирует вашу основную проблему. Затем вам нужно изменить свои селекторы с «ul li div» на «.list li», потому что вы не выбираете из своего «списка».

stop: function() { 
    var result = $("#select-result"); 

    //$(".list li").click(function() { -----------PROBLEM----------- 
     var index = $(".list li").index(this);    //Changed to .list li 
     var listLiText = $(".list li").eq(index).text(); //Changed to .list li 
     var listLiID = $(".list li").eq(index).attr('id'); //Changed to .list li 

     $(".list li").eq(index).css('background-color', '#669966'); //Changed to .list li 
     $(".list li").eq(index).css('color', '#FFFFFF'); //Changed to .list li 

     if ($("#select-result #" + listLiID).length == 0) { 
      result.append('<li id="' + listLiID + '">' + listLiText + '</li>'); 
     } 
     sortColumns(); 
    //}); 
} 

Вашего обновленного JS Fiddle: http://jsfiddle.net/NkgC2/30/

Answer 2

Ваш код должен выполняться после того, как страница готова:

(function($) { 
    $(document).ready(function() { 
     // your code here 
    }); 
})(jQuery);