关于js的click中function事件

最新推荐文章于 2024-04-30 16:53:04 发布

原创最新推荐文章于 2024-04-30 16:53:04 发布 · 5k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#js #ajax

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在页面加载时AJAX请求被误触发的问题，通过对比旧代码和新代码，发现click事件中是否包含function()是关键。当直接绑定sendData()时，页面加载即触发请求；而用匿名函数包裹时，只在点击事件时触发。

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

个人在使用之前的ajax请求进行修改,测试发现每次加载界面的时候都执行了ajax请求,后续再次点击,#btnSend没有再次触发.

再次测试:重新进入页面,先弹出alert("准备发送数据"),页面没有加载完成,点击之后页面才初始化完成,可以知道在页面加载完成之前执行了sendData(),而且该方法在点击发送事件.

经过旧文件和新文件的比对,差别在于click中有无包含function(),没有包含function的在页面初始化的时候初始化了click事件,所以就直接发送了数据,含有function的则在完成初始化完成后执行的点击事件才被执行.(做个记录避免再次碰到这类问题)

<script type="text/javascript">
		$(function(){
			//$("#btnSend").click(sendData());//使用此方法,页面加载就执行,后续点击事件就不执行
			$("#btnSend").click(function() {
				sendData();
			});
		});
		function sendData() {
			alert("准备发送数据");
			var trNO=$("#trNO").val();
			
			$.ajax({
				type:"post",
				url:"<%=ctxPath %>/test",
				data:{
					trNO:trNO,
					data:data
				},
				success:function(result)
				{
					alert("发送成功");
				},
				error:function()
				{
					alert("请求失败");
				}
			});
		}
	</script>