JS中onclick事件的一个坑
来源:互联网 发布:js鼠标移动显示图片 编辑:程序博客网 时间:2024/06/05 02:33
今天碰见的这个问题并没有从源头上把它理解,只是通过一个变通的方式解决了这个bug…
<!-- 这是之前用到的a标签,在onclick事件中给方法传入了两个参数,并没有什么问题,以下称为A --><a href="javascript:void()" onclick="alertErrorMsg(${declareNumber},${aaa})">错误信息</a> <!-- 这是在修改之后的a标签,在onclick事件中传入一个参数,这时候会出现本文所说的问题,以下称为B--><a href="javascript:void()" onclick="alertErrorMsg(${declareNumber})">错误信息</a>
//这是修改后的方法,只需要传入一个参数function alertErrorMsg(declareNumber){ var url = "xxxxxxxxx"; var datas = {"declareNumber":declareNumber,_:new Date().getTime()}; $.ajax({ url:url, data:datas, type:"POST", success:function(data){ var result = JSON.parse(data)["result"]; //layer.alert(typeof JSON.parse(data)["errorList"]); var list = JSON.parse(data)["errorList"]; if(result == 1){//成功,则解析json并遍历. var str = ""; for(var i=0;i<list.length;i++){ str += (i+1)+"."+list[i]+"<br/>"; } layer.open({ type: 1, title:"错误信息", skin: 'layui-layer-rim', //加上边框 area: ['600px', '400px'], //宽高 content: str }); }else if(result == 2){//无数据 layer.alert('没有错误信息!!!'); }else{//否则失败,提示系统异常 layer.alert('系统异常!!!'); } }, error:function(){ layer.alert('系统错误!!!'); } }); }
A状态,我传入的是两个String类型,onclick没问题。
B状态,我传入的是一个String类型,onclick出现了错误提示:
//这里的fff30368a2774ee69ce41968a473a8ca 是传入的值Uncaught ReferenceError: fff30368a2774ee69ce41968a473a8ca is not defined
在这里我跟公司中的前端讨论了很长时间,也没有一个头绪.
最后只能将bug解决,然后记录下来。
解决方法:
<!-- 修改后的a标签 --><a href="javascript:void()" id="errorMsg" class="btn btn-danger">错误信息</a> <!-- 将后端传入的值放入一个隐藏域中 --><input type="hidden" id="declareNumber" value="${declareNumber }"/>
//在dom元素加载完成后为指定的a标签绑定点击事件,然后调用上面的js方法与后台交互 //注意这里的解决方法是页面存在这个标签 $(function(){ $("#errorMsg").click(function(){ alertErrorMsg($("#declareNumber").val()); }); }); //如果需要点击的事件是由js创建则使用此方法,此方法需要在创建的标签中加上指定的class $(function(){ //$("#sample-table")是取要点击的元素的父级标签或者祖级标签 //on("click",,".numberClass",function(){});则是查找id为sample-table的子孙标签中所有class为numberClass的标签,并为其绑定点击事件,在点击事件中出发alertErrorMsg()方法 $("#sample-table").on("click",".numberClass",function(){ alertErrorMsg($(this).attr("name")); }); });
以上是这个问题的解决方法,但是如果有哪位知道原理的话,希望可以在评论中告知一下,万分感谢.
ps:这个问题出现的话,只是报js的错误,也就是浏览器中的console会打印错误,而不会进入到后台.
阅读全文
0 0
- JS中onclick事件的一个坑
- js的onclick事件
- JS中onclick与addEventListener绑定事件的区别
- js中处理鼠标单击事件 onclick
- JS 中 onclick 事件四种传参方式
- js中onclick事件里面传递参数
- js--- 动态加载checkbox的onclick事件
- JS更改onclick事件
- JS ONCLICK常用事件
- JS onclick常用事件
- JS ONCLICK常用事件
- 原生js onclick事件
- 给服务器控件button添加一个在onclick之前的js事件
- 在Android中ListView中添加两个点击事件,一个是OnItemClick,另一个是一个图片的OnClick事件
- js中常用的事件,onclick 单击事件、onblur 失去焦点事件、onchange改变事件、onmouseover鼠标进入事件、onmouseout鼠标移除事件、onsubmit提交事件
- js中常用的事件,onclick 单击事件、onblur 失去焦点事件、onchange改变事件、onmouseover鼠标进入事件、onmouseout鼠标移除事件、onsubmit提交事件
- android中onClick事件的实现
- 如何用Js写history.back()在linkButton的onclick事件中
- mysql 创建用户分配权限命令
- 编程第七十六、七十七天
- PHP设置默认时区
- better call saulS03E08
- 常用的网络相关命令
- JS中onclick事件的一个坑
- Mysql-Connector-ODBC 安装报错126,解决办法
- 一致性 hash 算法( consistent hashing )
- Android 手势滑动识别
- Unity3D编辑器之脚本打开SpritePacker窗口
- OPENGL—编码裁剪(Cohen-Sutherland)法裁剪图
- Mysql基础
- HDU2159
- 让ScrollView滑动到最顶端