jQuery Selectable无法在IE或Chrome中工作

jQuery Selectable not working in IE or Chrome

本文关键字：Chrome 工作 IE Selectable jQuery      更新时间：2023-09-26

我有一个jQuery可选列表，它有一个句柄，可以从一个列表中选择一个项目，并将其放入另一个"选定"列表中。这在Firefox中运行良好，但在Chrome和IE中根本不起作用。我无法单击项目将其移动到所选列表中。在Firefox中查看我的fiddle，它运行良好，然后在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/

我发现了您的问题：在Selective上"停止"点击事件后，您正在使用"点击"。在它停止可选择的单击后，您不能再单击。如果你评论掉点击，如下所示，那么它就解决了你的主要问题。然后，您需要将选择器从"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/

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

(function($) {
    $(document).ready(function() {
        // your code here
    });
})(jQuery);
相关文章：