javascript - 在 div 已经附加到一个 div 之后，将 div 附加到另一个 div

Question

我的程序是一个游戏，从 4 个可玩 Angular 色开始，每个 Angular 色都在自己的类 charContainer 中，这 4 个 div 位于类 character 的容器中。当玩家通过点击选择一个 Angular 色时，它会将其移动到类为 your 的容器中。之后容器 characters 中剩余未选择的字符移动到另一个名为 enemies 的 div 容器。这个 div 会将剩余的 3 个未单击的 div 移动到它。在此之后，玩家选择一个对手。我正在尝试将选定的对手移动到名为 opponent 的 div 容器中，但它一直附加到 your 容器中。我尝试删除类名 charContainer 并添加类 foes 但它仍然不起作用。

$(document).ready(function() {
  $('.charContainer').on('click', function() {
    $('#your').append($(this));
    $('.characters>.charContainer').each(function() {
      $(this).removeClass('charContainer').addClass('foes');
      $('#enemies').append($(this));
    })
    $('.characters').remove();
  })

  $('.foes').on('click', function() {
    $('#opponent').append($(this));
    // $(this).appendTo('#opponent');
    $(this).addClass('defender');
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="characters">
  <div class="charContainer darth">
    <h2 id="c1"></h2>
    <img class="vade" src="assets/images/vader.jpg">
    <p id="c1hp" data-hp="120"></p>
  </div>
  <div class="charContainer luke">
    <h2 id="c2"></h2>
    <img class="skywalker" src="assets/images/luke.jpg">
    <p id="c2hp" data-hp="100"></p>
  </div>
  <div class="charContainer won">
    <h2 id="c3"></h2>
    <img class="obi" src="assets/images/obiwan.jpg">
    <p id="c3hp" data-hp="150"></p>
  </div>
  <div class="charContainer maul">
    <h2 id="c4"></h2>
    <img class="dmaul" src="assets/images/maul.png">
    <p id="c4hp" data-hp="180"></p>
  </div>
</div>
<div id="your">
  <h2>Your Character</h2>
  <!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="enemies">
  <h2>Enemies</h2>
  <!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="fightSection">
  <h2>Fight Section</h2>
  <button id="attack" class="attk">
    <h1>Attack</h1>
  </button>
</div>
<div id="opponent">
  <h2>Opponent</h2>
  <!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>

删除charContainer类并添加foes类后，foes的onclick函数仍然发送到 your div，即使我摆脱了 charContainer。我需要它去 opponent div。

Answer 1

调用.off("click")

$(".characters>.charContainer").off("click")

在 .characters>.charContainer click 处理程序中将 click 从 .charContainer 元素中分离出来。

在 #enemies 元素处使用事件委托(delegate)，.one()，如果只有一个 .foes 元素应该附加到 #opponenent 元素

$('#enemies').one('click', ".foes", function() {})

将 click 附加到 #enemies 元素时，当元素动态添加 className foes 时调用处理程序被点击

$(document).ready(function() {
  $('.charContainer').on('click', function(e) {
    $("#your").append(this);
    $('.characters>.charContainer')
    .off("click")
      .each(function() {
        $(this).removeClass('charContainer')
          .addClass('foes');
        $('#enemies').append(this);
      })

    $('.characters').remove();
  })

  $('#enemies').one('click', ".foes", function() {
    $('#opponent').append($(this));
    // $(this).appendTo('#opponent');
    $(this).addClass('defender');
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="characters">
  <div class="charContainer darth">
    <h2 id="c1"></h2>
    <img class="vade" src="assets/images/vader.jpg" alt="vader">
    <p id="c1hp" data-hp="120"></p>
  </div>
  <div class="charContainer luke">
    <h2 id="c2"></h2>
    <img class="skywalker" src="assets/images/luke.jpg" alt="luke">
    <p id="c2hp" data-hp="100"></p>
  </div>
  <div class="charContainer won">
    <h2 id="c3"></h2>
    <img class="obi" src="assets/images/obiwan.jpg" alt="obiwan">
    <p id="c3hp" data-hp="150"></p>
  </div>
  <div class="charContainer maul">
    <h2 id="c4"></h2>
    <img class="dmaul" src="assets/images/maul.png" alt="maul">
    <p id="c4hp" data-hp="180"></p>
  </div>
</div>
<div id="your">
  <h2>Your Character</h2>
  <!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="enemies">
  <h2>Enemies</h2>
  <!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="fightSection">
  <h2>Fight Section</h2>
  <button id="attack" class="attk">
    <h1>Attack</h1>
  </button>
</div>
<div id="opponent">
  <h2>Opponent</h2>
  <!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>