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 Fiddle（首先在FF中尝试在IE或Chrome中）： http://jsfiddle.net/kmbonin82/NkgC2/17/

Answer 1

您的代码应在页面准备好后执行：

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

Answer 2

我发现了您的问题：在您已经“停止”可选择的点击事件后，您正在使用“点击”。停止可选择的点击后，您无法点击。如果您注释掉点击，如下所示，那么它会修复您的主要问题。然后，您需要将选择器从“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小提琴：http://jsfiddle.net/NkgC2/30/

jQuery Selectable无法在IE或Chrome中运行

2 个答案: