当我点击“ShoW”时,它会显示一条消息“Hi”, 但是当我点击下一个选项“显示”时,它没有显示消息。
$('.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 添加什么代码?
最佳答案
这是因为您创建的事件处理程序绑定(bind)到创建时已存在的对象:
$('.btn').on("click", function () {
这仅适用于在这行代码运行时已经可用的 .btn
元素 - 它不会被 jQuery 再次计算。
相反,使用这种格式来绑定(bind)事件,它将获取动态创建的元素:
$(document).on('click', '.btn', function () {
在此工作片段中看到:
$(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>
关于javascript - 使用 jquery 在另一个函数上创建克隆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67431741/