0

我一直在尝试解决这个问题大约一天，但我并没有取得太大进展。我想要两个列表，并通过双击在它们之间移动列表项。如果我有一个事件是“click”，另一个是“dblclick”，我可以让它工作，但这不是我想要的。如果我在这两种方法中附加“dblclick”事件，列表项将不会移动，只会在当前列表中重新排序。这是一个演示我的问题的 JSFiddle。我目前已经设置好了，所以一个事件是“click”，另一个是“dblclick”。如果您将实时函数中的参数更改为“单击”，使其与其他处理程序匹配，您将看到我遇到的问题。

HTML

<div id="orig">
<ul>
    <li class="original">one</li>
    <li class="original">two</li>
    <li class="original">three</li>
</ul>
</div>
<div id="moved">
    <ul>

    </ul>
</div>

CSS

#orig {
    width: 40%;
    height: 300px;
    overflow: auto;
    float: left;
    border: 1px solid black;
}

#moved {
    width: 40%;
    height: 300px;
    overflow: auto;
    float: right;
    border: 1px solid black;
}

jQuery

$(function() {
    $(".original").click(function(){
        this.className = "moved";
        $("#moved ul").append(this);
    });

    $(".moved").live("dblclick", function() { 
        this.className = "original";
        $("#orig ul").append(this);
    });

});

这是一个JSfiddle

4

2 回答 2

3

您可以使用on方法，live已弃用：

$("#orig").on("dblclick", "li", function() {
    $("#moved ul").append(this);
});

$("#moved").on("dblclick", "li", function() {
    $("#orig ul").append(this);
});

http://jsfiddle.net/zmnAm/6/

另外，如果您为div容器设置类，还可以使其更短：

$container = $('.container').on('dblclick', 'li', function(e) {
    $container.not(e.delegateTarget).find('ul').append(this);
});

http://jsfiddle.net/zmnAm/7/

于 2013-05-02T14:51:10.170 回答
-1

当您将事件处理程序应用于列表项时，它们会一直停留在这些元素上。当您单击左侧项目上的一个项目，然后单击右侧列表中的同一项目时，它仍然是同一个项目，具有您单击的相同事件处理程序，因此它仍然会移动到右侧，这它已经在里面了。

您可能必须从您刚刚单击的项目中删除原始处理程序，并将另一个附加到该项目。

于 2013-05-02T14:50:55.257 回答