0

我有一个 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/

4

2 回答 2

0

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

(function($) {
    $(document).ready(function() {
        // your code here
    });
})(jQuery);
于 2013-08-19T15:18:06.653 回答
0

我发现了您的问题：在您已经“停止”了可选择的点击事件之后，您正在使用“点击”。在它停止可选择的单击后，您将无法单击。如果您注释掉单击，如下所示，那么它可以解决您的主要问题。然后，您需要将选择器从“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/

于 2013-08-19T16:08:16.380 回答