javascript - 使用 jquery 在另一个函数上创建克隆
问题描述
当我单击“显示”时,它会显示一条消息“嗨”,但是当我单击下一个选项“显示”时,它不会显示一条消息。
$('.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 添加什么代码?
解决方案
这是因为您创建的事件处理程序绑定到创建时存在的对象:
$('.btn').on("click", function () {
这仅.btn
适用于在这行代码运行时已经可用的元素 - 它不会再次由 jQuery 评估。
相反,使用这种格式来绑定事件,它将获取动态创建的元素:
$(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>
推荐阅读
- r - RMarkdown 使列表的元素在环境中可用
- r - 计算列中重复出现的值的列,重置为新值
- uitableview - 如何删除 Xamarin iOS 中每个单元格中的默认编辑图标
- ios - 轻量级问题:所有这些 Apple 首字母缩略词实际上代表什么?
- sql - Postgres Group 通过保留先前的顺序
- mongodb - 使用 volidator 创建 mongodb 集合,然后插入 doc 错误
- python - 检测图像边缘是否几乎是一条直线
- neural-network - Julia lang 错误:LoadError:UndefVarError:训练未定义
- r - ggplot2中的中心和偏移标签
- javascript - Vuex + firebase 数据库操作