jQuery Selectable not working in IE or Chrome

Question

I have a jQuery selectable list that has a handle to select an item from one list and put it in another "selected" list. This works fine in Firefox but does not work at all in Chrome and IE. I am not able to click an item to move it to the selected list. See my fiddle in Firefox, which works fine, and then view it in IE or Chrome and notice that it no longer works as expected. (click the plus sign to add a column to the selected list).

jQuery code to move to selected list:

$(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 Fiddle (try first in FF then in IE or Chrome): http://jsfiddle.net/kmbonin82/NkgC2/17/

Answer 1

I found your problem: You are using an "click" after you have already "stopped" the click event on selectable. You cannot click after it has stopped a selectable click. If you comment out the click, as below, then it fixes your main problem. Then, you need to change your selectors from "ul li div" to ".list li" because you are not selecting from your "list".

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();
    //});
}

Your updated JS Fiddle: http://jsfiddle.net/NkgC2/30/

Answer 2

Your code should execute after the page is ready:

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