本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(8)

JQuery 在页面加载完 在$(document).ready(fn)函数里直接调用一个A标签的click事件没效果的解决方案

发布于2021-05-30 12:20     阅读(1303)     评论(0)     点赞(24)     收藏(3)


A标签的click事件没效果

出现的原因:

	在表格的最后一列添加操作列,列的内容为超链接内容,可能是查看详情,需要调用一个a 标签的onclick方法进行操作。
$(document).ready(function () {
	//这里的表格没写上来(这是表格的最后一列)
	{
	  title: "操作",
	  data: "id",// 后台接口返回的json数据的key
	  mRender: function(data, type, row,iDataIndex) {
	      var html = '<a href="javascript:void(0);" οnclick="opImpDetial('+id+')">查看</a>'
	      return html;
	  }         
	}
	function opImpDetial(caseNo){
	alert("你好");
}
var opImpDetial= function (){
        alert("你好!!");
    }
});

这两种写法都会报错,会提示onclick is not defined。

那先解释下为什么用 $(document).ready(function(){})

$(document).ready(function(){}) 这种写法。
在jq中这一句等同于jquery(document).ready(function(){})也等同于
$(function(){})。

function test(){
var tags = $("#test");....//功能函数
}
test();

写功能函数,然后我们在网页头部加载这个js文件,就会出现效果不出来的现象,原因在于当浏览器加载这个js文件的内容的时候,#test这个id在网页后面,还在就绪阶段,还没加载也即不存在#test,当这个js读不到这个id的时候自然就不能成功给#test添加功能。

而解决办法除了把这个js放在网页最后加载之外,还有一个办法就是通过

$(document).ready(function(){})

包住,这样就可以解决加载顺序造成的错误。也就是我上面的写法。

$(document).ready(function(){})里面的内容是规定在DOM(网页文档)加载完成之后网页内容加载之前再执行的,也许很难理解,可以理解成html加载完成之后,图片加载之前。当所有id都加载完成之后再去查找#test这样就能找到了,既可以完成js的功能实现。

$(document).ready(function(){})

类似的还有原生js的

windows.onload()

,如:window.onload=function(){ alert("Hello!"); }
window.onload()与$(document).ready(function(){})类似但又不同,window.onload()是在页面所有元素(包括图片,引用文件)加载完后才执行,既整个页面所有东西都加载完成后再加载。

解决方案

其实这个是作用域的问题,在

$(document).ready(function () {
	//里面申明并调用方法 其实调用不到
	//js亦存在作用域,当你的方法声明在 $(function{}) 之中时,表示该方法只能在该方法内部被使用
//而在触发点击事件 onclick 时,它是在 Windows 域中寻找方法,当然无法找到
}

所以我的解决方案是把方法写在了

$(document).ready(function () {}之外

$(document).ready(function () {
	var html = '<a href="javascript:void(0);" οnclick="opImpDetial('+id+')">查看</a>'
});
var opImpDetial = function(id){
	alert(id);
}

我是张同学,记录下工作中出现的问题。
不积跬步,无以至千里;不积小流,无以成江海。




所属网站分类: 技术文章 > 博客

作者:哦八戒八戒

链接:http://www.qianduanheidong.com/blog/article/116001/670f2508c960f924714a/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

24 0
收藏该文
已收藏

评论内容:(最多支持255个字符)