jquery绑定事件不生效的解决方法


Posted in Javascript onFebruary 11, 2014

今天在开发前台页面时发现jquery绑定click事件,怎么都不生效。代码如下:
1.html:<input id="ceshisub" type="button" value="单击事件" >
2.html引用的test.js中的方法函数:

$("#ceshisub").bind("click",function(){ 
var a=1; 
a +=1; 
alert("ceshisub"); 
});

出现的问题就是在页面中点解“单击事件”按钮没有任何反应,打开js调试窗口在var a=1;这一行打的断点没有进来。
解决的办法是:
一、在上述js函数上添加加载事件:
添加后的代码如下:
$(function(){ 
$("#ceshisub").bind("click",function(){ 
var a=1; 
a +=1; 
alert("ceshisub"); 
}); 
});

这样的话,绑定事件就生效了。
js的加载函数共有三个,除了上述的
$(function(){ 
alert("第1种方法。"); 
});

还有以下两个方法:
window.onload=function(){ 
alert("第2种方法。"); 
} $(document).ready(function(){ 
alert("第3种方法。"); 
});

二、如果不采用js加载函数来对绑定事件进行初始化的话还有一个方法:
将引用js的语句
<script language="javascript" src="/js/test.js"></script>
放到页面的最后面进行加载。

总结:
jquery在元素上A绑定事件时,首先会在docment中查找该元素A,如果没有找到则绑定失败。
上面第一个解决方式是在页面初始化后,在初始化js时在进行绑定
第二个方式就是先要保证页面元素都初始化完成后,在去进行绑定,这时所有的元素都已将初始化完成,肯定能绑定上。

Javascript 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
jQuery取id有.的值的方法
May 21 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
jquery datatable服务端分页
Aug 31 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 Javascript
gojs实现蚂蚁线动画效果
Feb 18 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 #Javascript
JS创建自定义表格具体实现
Feb 11 #Javascript
js实现div的切换特效上一个下一个
Feb 11 #Javascript
js中文逗号转英文实现
Feb 11 #Javascript
JS自调用匿名函数具体实现
Feb 11 #Javascript
js跳转页面方法实现汇总
Feb 11 #Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 #Javascript
You might like
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
jQuery textarea的长度进行验证
2009/05/06 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
JS编程小常识很有用
2012/11/26 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
js类式继承与原型式继承详解
2016/04/07 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
简单介绍Python中的几种数据类型
2016/01/02 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
安全资金保障制度
2014/01/23 职场文书
服务行业口号
2014/06/11 职场文书
普通党员对照检查材料
2014/09/24 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
技术入股合作协议书
2014/10/07 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
2014年销售员工作总结
2014/12/01 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
详解python的内存分配机制
2021/05/10 Python
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis