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的文件是什么文件
Dec 06 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 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
基于mysql的bbs设计(一)
2006/10/09 PHP
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
PHP中动态显示签名和ip原理
2007/03/28 PHP
php date()日期时间函数详解
2010/05/16 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
js实现图片轮换效果代码
2013/04/16 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
python自动安装pip
2014/04/24 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
python构建自定义回调函数详解
2017/06/20 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
python 输出所有大小写字母的方法
2019/01/02 Python
Python Lambda函数使用总结详解
2019/12/11 Python
Python常用类型转换实现代码实例
2020/07/28 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
护理专业毕业生自我鉴定
2013/10/08 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
python爬取某网站原图作为壁纸
2021/06/02 Python
Python正则表达式中flags参数的实例详解
2022/04/01 Python
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server