Question

我试图将div移动到另一个div并返回。它从左div移动到右div，但不会从右div移动到左div。只需附加到同一个（右）div。我在选择器中使用和不使用'div'尝试过它，以及我能找到的其他选项。对不起，如果已经回答了。

<div id="main" class="main">
<div id="left" class="box">

<div id="user1" class=".usersAll">User1</div>

<div id="user2" class=".usersAll">User2</div>

</div>
<div id="right" class="box">
</div>
</div>


<script type="text/javascript">
$(document).ready(function() {
    $('div#left div.usersAll').on('click', function () { 
        // move from "left" to "right"
        $(this).appendTo("#right");
    });

     $('div#right div.usersAll').on('click', function () { 
       //  move from "right" to "left"
        $(this).appendTo("#left");
    }); 
});
</script>

Answer 1

由于绑定事件处理程序时元素不存在，您可能希望委派

$(document).ready(function() {
    $('#left').on('click', '.usersAll', function () { 
         $(this).appendTo("#right");
    });

     $('#right').on('click', '.usersAll', function () { 
         $(this).appendTo("#left");
    }); 
});

并且您不希望HTML中的className中包含句点

$(document).ready(function() {
    $('#left').on('click', '.usersAll', function () { 
        $(this).appendTo("#right");
    });
    
    $('#right').on('click', '.usersAll', function () { 
        $(this).appendTo("#left");
    }); 
});

#left {
  position: absolute;
  border: 1px solid #000;
  left: 0;
  top: 0;
}

#right {
  position: absolute;
  border: 1px solid #000;
  left: 200px;
  top: 0;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" class="main">
  <div id="left" class="box">
    <div id="user1" class="usersAll">User1</div>
    <div id="user2" class="usersAll">User2</div>
  </div>
  <div id="right" class="box">
  </div>
</div>

appendTo div来自div和back

1 个答案: