如何洗掉jquery中的附加元素

通過右鍵單擊每張圖片，該圖片將被洗掉，并通過單擊 按鈕創建一個新專案。

但問題是無法洗掉創建（附加）的新專案。為什么會這樣？

$(document).ready(function() {
  let nextItem = 4;
  $(".items div").click(function() {
    $(this).remove();
  });
  $(".btn").click(function() {
    $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt="如何洗掉jquery中的附加元素"></div>`);
    nextItem  ;
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <div class="items">
    <div id="1"><img src="https://picsum.photos/id/0/200/100" alt=""></div>
    <div id="2"><img src="https://picsum.photos/id/1/200/100" alt=""></div>
    <div id="3"><img src="https://picsum.photos/id/2/200/100" alt=""></div>
  </div>
  <button class="btn"> </button>
</div>

uj5u.com熱心網友回復：

因為這些不是事件處理程式的目標。它不會自動更新與查詢選擇器匹配的元素，就像您使用過的一樣addEventHandler- 它運行一次。（見下文，他們不會將訊息記錄到控制臺，但硬編碼的會記錄）。

顯示代碼片段

$(document).ready(function() {
  let nextItem = 4;
  $(".items div").click(function() {
    console.log("Event processed");
  });
  $(".btn").click(function() {
    $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt="如何洗掉jquery中的附加元素"></div>`);
    nextItem  ;
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <div class="items">
    <div id="1"><img src="https://picsum.photos/id/0/200/100" alt=""></div>
    <div id="2"><img src="https://picsum.photos/id/1/200/100" alt=""></div>
    <div id="3"><img src="https://picsum.photos/id/2/200/100" alt=""></div>
  </div>
  <button class="btn"> </button>
</div>

相反，我要做的是將洗掉定義為一個函式，并使用以下命令將其重新添加到新元素中id：

$(document).ready(function() {
  let nextItem = 4;
  function removeItem() {
    $(this).remove();
  }
  $(".items div").click(removeItem);
  $(".btn").click(function() {
    $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt="如何洗掉jquery中的附加元素"></div>`);
    $(`#${nextItem}`).click(removeItem);
    nextItem  ;
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <div class="items">
    <div id="1"><img src="https://picsum.photos/id/0/200/100" alt=""></div>
    <div id="2"><img src="https://picsum.photos/id/1/200/100" alt=""></div>
    <div id="3"><img src="https://picsum.photos/id/2/200/100" alt=""></div>
  </div>
  <button class="btn"> </button>
</div>

uj5u.com熱心網友回復：

您應該使用實時事件https://api.jquery.com/live/ 因為您正在創建一個新的 Dom 元素并且不再附加點擊事件

$(".items div").live('click',function() {
    $(this).remove();
  });

uj5u.com熱心網友回復：

嘗試這個

$(document).ready(function() {
  let nextItem = 4;
  $(".items div").click(function() {
    $(this).remove();
  });
  $(".btn").click(function() {
    $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt="如何洗掉jquery中的附加元素"></div>`);
    nextItem  ;
  })
  $(`div#${nextItem}`).on('click',function(){
     $(this).remove();
  })
});

標籤：javascript html jQuery

上一篇：如何在jQuery的每個回圈中清除影像輸入？

下一篇：僅顯示包含周末日期的專案