javascript - "Cloning"事件上的 JQuery "Click"未针对所有按钮触发

Question

“Click”事件上的 Jquery“Cloning”不会为所有按钮触发，它仅在第一个按钮中起作用。我需要让它为所有按钮触发。有人可以帮我解决吗？

下面是代码:

//$(html).appendTo(this).hide().slideDown();

$('.LPclone').click(function() {
  $('.widgetWrap').clone().appendTo('#tempEditorView');
});

.widgetWrap {
  padding: 30px 10px;
  align-self: baseline;
}

.widgetHeading {
  background-color: transparent;
  color: #222;
  position: relative;
}

.LPclone {
  height: 30px;
  padding: 3px 10px;
  line-height: 30px;
  background-color: #000;
  color: #fff;
  display: inline-block;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tempEditorView">
  <div class="widgetHeading widgetWrap" style="display: block;">
    <div class="LPtempEditArea"><i class="LPclone">Clone</i></div>
    <h1 contenteditable="true">Add your heading text here</h1>
  </div>
</div>

在这里查看:https://jsfiddle.net/Issact/sL4q3ohh/2/

Answer 1

click 不会将点击事件绑定(bind)到动态生成的元素上。你需要委托(delegate)事件

$("#tempEditorView").on('click', '.LPclone', function(){
        $('.widgetWrap').clone().appendTo('#tempEditorView');
});