Ajax,按钮正确绑定事件

"博客探讨了在Ajax请求后动态生成的内容无法绑定click事件的问题。原因是Ajax获取的数据在事件绑定之后才创建按钮。解决方案包括在创建按钮时直接绑定事件,或者使用$(document).on('click', '.edit_btn', function() {}
摘要由CSDN通过智能技术生成

在我们发送Ajax请求的时候,如果想在按钮上添加click绑定事件

会出现绑定不上的问题。

如图:

在按钮上添加 class = "edit_btn" 标识后,创建函数。

当点击 【修改】按钮后并未出现edit弹出框,如图:

为什么呢?

页面刷新进行加载绑定事件,而刷新后的数据,是页面加载完成后发送的Ajax请求拿到的数据,是在绑定事件之后才创建出的按钮。

如何解决

如图:

1.可以在创建按钮的时候绑定。(当然,这样会出现代码多、耦合现象)

2.使用 $(document).on("click",".edit_btn",function(){})替换

注:document指整个文档中,相当于父代。

(本文引用,如侵则删)

在前端开发中,我们常常需要给按钮添加点击事件来实现一些交互功能。针对按钮事件绑定,我们可以使用layer confirm(弹窗确认框组件)来实现。 首先,我们需要引入layer confirm的相关资源文件,例如CSS和JavaScript文件。 接下来,在HTML代码中创建一个按钮元素,可以通过id属性或class属性来定位该按钮。 然后,在JavaScript中使用document.querySelector或document.getElementById等方法获取到该按钮元素。 接着,我们可以使用该按钮元素的addEventListener方法为其绑定一个点击事件。 在事件处理函数中,我们可以使用layer confirm的相关方法来弹出一个确认框,例如layer.confirm('确认要执行该操作吗?', function(){...})。 在确认框的回调函数中,我们可以编写具体的业务逻辑代码,例如发送Ajax请求、修改页面内容等操作。 最后,记得要在事件处理函数的最后返回false,以阻止按钮的默认行为(如表单提交)。 通过以上步骤,我们就可以将按钮和layer confirm的事件进行绑定了。当用户点击按钮时,会触发点击事件处理函数,弹出确认框,用户确认后执行相应的操作。 需要注意的是,在绑定事件之前,要确保layer confirm的资源文件已经正确引入,并且在事件处理函数中可以使用layer.confirm等相关方法。另外,在实际开发中,可以根据需要自定义确认框的样式和按钮行为等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

烜烜程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值