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

文章讲述了在Django中,如何为循环生成的多个按钮(btn)绑定点击事件,使其点击后都能弹出模态框的问题,解决方法是为每个按钮添加自定义class并使用jQuery的类选择器而非ID选择器来绑定事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

原因

  1. 问题代码
<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. 需要修改的代码
<button type="button" class="btnDel btn btn-primary btn-lg" > [删除] </button>

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

以上就是全部内容

Django 中实现模态框可以使用前端框架(如Bootstrap)提供的模态框组件。下面是个简单的示例,展示如何在 Django 中使用 Bootstrap 的模态框。 1. 首先,在你的 Django 项目中安装 Bootstrap。你可以通过下载 Bootstrap 源码并将其复制到你的项目中,或者使用第三方包管理工具(如 pip)安装 Bootstrap。 2. 在你的 Django 应用的 HTML 模板中,引入 Bootstrap 的 CSS 和 JavaScript 文件。可以通过下载 Bootstrap 并将其放置在你的项目中,或者使用 CDN 引入。 ```html <!DOCTYPE html> <html> <head> <!-- 引入 Bootstrap CSS --> <link rel="stylesheet" href="path/to/bootstrap.css"> </head> <body> <!-- 页面内容 --> <!-- 引入 Bootstrap JavaScript --> <script src="path/to/bootstrap.js"></script> </body> </html> ``` 3. 在你的 HTML 模板中,创建个触发模态框的按钮和模态框元素。给按钮添加 `data-toggle` 和 `data-target` 属性,指定它们与模态框的关联。 ```html <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 打开模态框 </button> <!-- 模态框 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> 模态框内容 </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> ``` 以上示例中的模态框通过 `data-toggle="modal"` 和 `data-target="#myModal"` 属性与按钮关联。当按钮被点击时,模态框将会显示出来。 注意:上述示例中的 Bootstrap 文件路径需要根据你的项目实际情况进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值