javascript - JQuery-appendTo() 的问题

Question

我正在将元素从一个列表移动到另一个列表，问题是: 我有 javascript 绑定(bind)函数到 <li>取决于<ul> ，如果我点击一个<li>位于 <ul> 内使用特定的ID，执行一个函数。

当我移动<li>时如果成功，则假定 <li>已经在另一个 <ul> (目的地一)。但如果我点击<li>在新列表中，事件仍然与源事件绑定(bind) <ul>

如何绑定(bind) <li>当前<ul> ？

感谢您的帮助。

<ul id="sourceList">
     <li>element1</li>
     <li>element2</li>
</ul>

<ul id="destinationList"></ul>

<script>

        $('#sourceList li').click(function () {
                $(this).appendTo('#destinationList');
                console.log("from source");
            });

        $('#destinationList li').on("click", function () {
            $(this).appendTo('#sourceList');
            console.log("from destination");
        });

</script>

Answer 1

第一次执行脚本时会绑定(bind)事件，因此在您的代码中，#sourceList 中的每个 li 都有一个附加到第一个定义的事件监听器的点击事件，无论您是否将元素移动到另一个容器。您需要为此使用事件委托(delegate):

$('#sourceList').on('click', 'li', function () {
    $(this).appendTo('#destinationList');
    console.log("from source");
});

$('#destinationList').on('click', 'li', function () {
    $(this).appendTo('#sourceList');
    console.log("from destination");
});