附加功能后，悬停功能不适用于附加的div内容

Question

我正在尝试使用附加功能添加内容。但是悬停功能在追加后不适用于新的div内容。我可以在这方面寻求帮助吗？

jsfiddle代码在这里：https://jsfiddle.net/xpwrv8mo/

JS代码：

$('#add').click(function(){   
$('.temp-wrapper').append('<div class="temp"><div class="icon-del"></div><div>new content</div></div>');
});

$(".temp").hover(function(){
$(this).find(".icon-del").show();
},function(){ $(this).find(".icon-del").hide(); });

$(".icon-del").click(function(event) {
if (!confirm('Are you sure?')) return false;
$(this).parent().remove();
return true;
});

HTML代码：

    <div class="temp-wrapper">
    <div class="temp"><div class="icon-del"></div><div>A</div></div>
    <div class="temp"><div class="icon-del"></div><div>B</div></div>
    <div class="temp"><div class="icon-del"></div><div>C</div></div>
    </div>
<p style="text-align:center;"><input type="button" class="button" id="add" value="ADD" /></p>

Answer 1

使用动态事件触发器，如果​​使用.click（），则它们仅附加到当时存在的元素上。如果使用以下代码，则在运行关联的函数之前，将根据给定的选择器检查类.temp-wrapper中元素内的任何单击。

$(".temp-wrapper").on("mouseenter", ".temp", function(){ ...  });

$(".temp-wrapper").on("mouseleave", ".temp",function(){ ... });

$(".temp-wrapper").on("click", ".icon-del", function(event) { ... });

---

演示

$('#add').click(function() {
  $('.temp-wrapper').append('<div class="temp"><div class="icon-del"></div><div>new content</div></div>');
});

$(".temp-wrapper").on("mouseenter", ".temp", function() {
  $(this).find(".icon-del").show();
});

$(".temp-wrapper").on("mouseleave", ".temp", function() {
  $(this).find(".icon-del").hide();
});

$(".temp-wrapper").on("click", ".icon-del", function(event) {
  if (!confirm('Are you sure?')) return false;
  $(this).parent().remove();
  return true;
});

.icon-del {
  height: 10px;
  width: 10px;
  background: black;
  display: none;
}

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

<div class="temp-wrapper">
  <div class="temp">
    <div class="icon-del"></div>
    <div>A</div>
  </div>
  <div class="temp">
    <div class="icon-del"></div>
    <div>B</div>
  </div>
  <div class="temp">
    <div class="icon-del"></div>
    <div>C</div>
  </div>
</div>
<p style="text-align:center;"><input type="button" class="button" id="add" value="ADD" /></p>