django中循环生成的多个btn,只有第一个btn会弹出模态框

django中循环生成的多个btn,只有第一个btn会弹出模态框

需求:为每个button按钮都绑定同一点击事件,点击每个btn都可弹出模态框

原因

  1. 问题代码
html 复制代码
<button id='btnDel' type="button" class="btn btn-primary btn-lg" > [删除] </button>

<script type="text/javascript">
	$(function (){
		bindBtnDelEvent();
	})
	function bindBtnDelEvent() {
		$("#btnDel").click(function () {
			// 点击id为btnDown的按钮,出现对应的模态框
			$('#myModal').modal('show');
		});
	}
</script>
  1. 在使用$('#btnDel')的方法寻找id,只能为第一个btn绑定点击事件,因为jQuery中通过$匹配标签id的方法默认仅寻找第一个。

解决方法

  1. 解决方法:为btn添加自定义class,通过寻找class的方式为每个button绑定同一个点击事件。如这里的"btnDel":
  2. 需要修改的代码
html 复制代码
<button type="button" class="btnDel btn btn-primary btn-lg" > [删除] </button>

$(".btnDel").click(function () { // js需修改的部分

以上就是全部内容

相关推荐
青 春 记 忆5 小时前
零基础入门python30:Flask个人账本从空目录运行与阶段验收
python·flask·后端开发
陈随易5 小时前
pm2 替代品,nodejs&bun 线上部署必备工具
前端·后端·程序员
l1258655 小时前
# LangGraph Memory机制深度解析:短期记忆与长期记忆的工程实践
前端·人工智能·python·langchain·bootstrap
丘山一郎6 小时前
Spring 中的IOC控制反转 和DI依赖注入
java·后端·spring
码视野6 小时前
基于 Spring Boot + Vue3 的【大学英语四六级 (CET-4/6) 作文智能评分与句式润色系统】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端·vue3
MetaLite6 小时前
Spring-AOP自调用为什么失效-AopContext真能解决吗
java·后端·spring
MC皮蛋侠客7 小时前
Tauri 2.x 系列(五):调用系统 API——官方插件、Rust crate 与原生能力
开发语言·后端·rust
金銀銅鐵7 小时前
斐波那契数列的个位数出现的周期是多少?
python·数学
whcyhhh8 小时前
头歌实践教学平台:数据科学与大数据技术导论(十二)
大数据·开发语言·python·数据清洗
qq_316411038 小时前
专业的腹腔镜医疗器械物联网APP开发服务商
python