jquery - 无法将列表元素从右侧移回不知道为什么

2024-05-16 • 问答

    <div class="box">
        <h1>Left List</h1>
        <ul id="left-list">
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>
    </div>
    <div class="box">
        <h1>Right List</h1>
        <ul id="right-list">
            <li>TEST</li>
            <li></li>
            <li></li>
        </ul>
    </div>


$('#left-list li').on('click',function () {
    $(this)
        .appendTo($('#right-list'))
        .unbind('click');
})

$('#right-list li').on('click',function () {
    $(this)
        .appendTo($('#left-list'))
        .unbind('click');
})

移动一次 x 后它只停留在一侧：我该怎么办？解决这个问题？我想从左到右移动，那些移动到右边的，回到左边

click 事件处理程序仅适用于最初在 li 中的 #right-list 元素，而不是新附加的元素。您可以在新添加的元素上添加事件侦听器，也可以使用事件委托。

事件委托示例：

$(document.body).on('click','#left-list li',function() {
  $(this)
    .appendTo($('#right-list'))
    .unbind('click');
})
$(document.body).on('click','#right-list li',function() {
  $(this)
    .appendTo($('#left-list'))
    .unbind('click');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <h1>Left List</h1>
  <ul id="left-list">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
  </ul>
</div>
<div class="box">
  <h1>Right List</h1>
  <ul id="right-list">
    <li>TEST</li>
    <li></li>
    <li></li>
  </ul>
</div>

您需要使用 event delegation 来捕捉动态 DOM 更新。您可以改为将侦听器添加到 document：

$(document).on('click',function()..

$(document).on('click',function()...

或者，更好的是，将您的 box 元素包装在一个父元素中，并以此为目标：

$('.boxes').on('click',function() {
  $(this).appendTo($('#right-list'));
})

$('.boxes').on('click',function() {
  $(this).appendTo($('#left-list'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxes">
  <div class="box">
    <h1>Left List</h1>
    <ul id="left-list">
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
  <div class="box">
    <h1>Right List</h1>
    <ul id="right-list">
      <li>TEST</li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

jquery - 无法将列表元素从右侧移回不知道为什么

minm_in520 回答：jquery - 无法将列表元素从右侧移回不知道为什么

大家都在问