JQuery实现动态加载的多个相同class元素的点击事件

话不多说,请直接复制下面这段代码到HTML页面,然后用浏览器打开。

<input type="button" value="删除" class="delBtn" id="1"/>
<input type="button" value="删除" class="delBtn" id="2"/>
<input type="button" value="删除" class="delBtn" id="3"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
	$(".delBtn").on("click",function(){
		alert(this.id);
	})
</script>

方法:

把
$(".delBtn").click(function(){})
修改为
$(".delBtn").on("click",function(){}
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
你可以使用以下代码来实现一个 jQuery 动态数据加树多选左右切换穿梭框: HTML: ```html <div class="transfer-wrapper"> <select id="left-select" multiple></select> <div class="transfer-controls"> <button id="btn-add">添加</button> <button id="btn-remove">移除</button> </div> <select id="right-select" multiple></select> </div> ``` JavaScript: ```javascript $(document).ready(function() { // 模拟动态数据 var data = [ { id: 1, name: '选项1' }, { id: 2, name: '选项2' }, { id: 3, name: '选项3' }, // 添加更多数据... ]; // 创建左侧选项 $.each(data, function(index, item) { var option = $('<option>', { value: item.id, text: item.name }); $('#left-select').append(option); }); // 添加按钮点击事件 $('#btn-add').on('click', function() { // 获取选中的左侧选项 var selectedOptions = $('#left-select option:selected'); // 将选中的选项移动到右侧 selectedOptions.appendTo('#right-select'); }); // 移除按钮点击事件 $('#btn-remove').on('click', function() { // 获取选中的右侧选项 var selectedOptions = $('#right-select option:selected'); // 将选中的选项移动到左侧 selectedOptions.appendTo('#left-select'); }); }); ``` 通过上述代码,你可以创建一个带有左右切换功能的多选穿梭框。左侧是动态加载的数据,通过选择左侧的选项并点击 "添加" 按钮,可以将选中的选项移动到右侧;同样地,通过选择右侧的选项并点击 "移除" 按钮,可以将选中的选项移动回左侧。你可以根据自己的需求修改代码和样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值