Question

我一直试图解决这个问题大约一天，但我还没有取得太大进展。我想要两个列表，并通过双击在它们之间移动列表项。如果我有一个事件是＆＃34;点击＆＃34;，另一个＆＃34; dblclick＆＃34;我可以让它工作，但那不是我想要的。如果我附上＆＃34; dblclick＆＃34;两种方法中的事件，列表项都不会移动，只会在当前列表中重新排序。这是一个证明我的问题的JSFiddle。我目前已经进行了设置，因此有一个事件是＆＃34;点击＆＃34;另一个是＆＃34; dblclick＆＃34;。如果您将实时功能中的参数更改为＆＃34;请单击＆＃34;所以它与其他处理程序相匹配，你会看到我遇到过的问题。

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

Answer 1

您可以使用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/

Answer 2

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

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

使用jQuery移动列表项的问题

2 个答案: