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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
微信小程序通过js实现瀑布流布局详解
Aug 28 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
PHP中常见的缓存技术实例分析
2015/09/23 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
Open and Print a Word Document
2007/06/15 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
python解析xml文件实例分享
2013/12/04 Python
Python使用gensim计算文档相似性
2016/04/10 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
详解Python的三种可变参数
2019/05/08 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
公司年会演讲稿范文
2014/01/11 职场文书
计算机专业职业规划
2014/02/28 职场文书
企业出纳岗位职责
2014/03/12 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
售后服务承诺书模板
2014/05/21 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
信息员培训方案
2014/06/12 职场文书
先进基层党组织材料
2014/12/25 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android
php解析非标准json、非规范json的方式实例
2022/05/10 PHP