Ajax提交表单，js绑定事件无效

最新推荐文章于 2022-11-03 21:47:47 发布

原创最新推荐文章于 2022-11-03 21:47:47 发布 · 701 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #表单提交 #js

复习资料同时被 2 个专栏收录

10 篇文章

订阅专栏

ajax

2 篇文章

订阅专栏

本文探讨了使用Ajax进行表单提交时遇到的按钮绑定事件失效的问题。通过修改JavaScript代码，采用$(document).on方法成功实现了按钮点击事件的绑定。

我需要用ajax表单提交，用js绑定一个按钮并且ID都是正确的，但是点击按钮却没效果。之前我是在按钮上用的ID选择的，之前也碰到过类似的，我以为不能用ID于是就用了onclick

<button type="button" class="btn btn-primary btn-lg" id="yuyue_finish_btn">完成登记</button>

然后就改成了这样的

<button type="button" class="btn btn-primary btn-lg" onclick="yuyue_finish_btn()">完成登记</button>

然而都没什么用。后来找资料发现是绑定事件在文档没有加载完成时是无法绑定的，因为不能获取到HTML元素，所以需要用 $(document).on(e,selector,function()) 来绑定事件。我将之前的js代码改了一下

这是之前的：

$("#yuyue_finish_btn").click(function(){

$.ajax({
        type: "post",
        url:"/preregistration/add",
        data:$('#add_yuyue').serialize(),
        error: function(request) {
            alert("登记失败");
        },
        success: function(data) {
        	window.location.reload();
        	alert("完成登记")
        }
		
	})

});

这是更改之后的

$(document).on('click','#yuyue_finish_btn',function() {
	$.ajax({
        type: "post",
        url:"/preregistration/add",
        data:$('#add_yuyue').serialize(),
        error: function(request) {
            alert("登记失败");
        },
        success: function(data) {
        	window.location.reload();
        	alert("完成登记")
        }
		
	})
});