使用 jquery 在另一个函数上创建克隆

Question

当我点击“显示”时，它会显示一条消息“嗨”， 但是当我点击下一个选项“显示”时，它没有显示消息。

$('.btn').on("click", function () {
    alert('Hi');
    $('.box .btn').remove();
    $('.btn').clone().appendTo('.box'); 
    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">ShoW</div>
<div class="box"></div>

我应该为 JS 添加什么代码？

Answer 1

这是因为您创建的事件处理程序绑定到创建时存在的对象：

$('.btn').on("click", function () {

这仅适用于在这行代码运行时已经可用的 .btn 元素 - 它不再由 jQuery 评估。

改为使用这种格式来绑定事件，这将获取动态创建的元素：

$(document).on('click', '.btn', function () {

在这个工作的 sn-p 中看到这里：

$(document).on('click', '.btn', function () {
    alert('Hi');
    $('.box .btn').remove();
    $('.btn').clone().appendTo('.box'); 
    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">ShoW</div>
<div class="box"></div>

Answer 2

克隆后必须再次设置事件。 然后，您可以将事件回调声明为一个函数，并在克隆元素后再次设置事件，如下所示：

function appendShowButton() {
    alert('Hi');
    $('.box .btn').remove();
    var newEl = $('.btn').clone().appendTo('.box');
    newEl.on('click', appendShowButton);
    return false;
}

$('.btn').on("click", appendShowButton);