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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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的变量总结 新手推荐
2011/04/18 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
offsetParent 算法分析
2010/04/05 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
利用Python开发实现简单的记事本
2016/11/15 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
python实现烟花小程序
2019/01/30 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
导购员的岗位职责
2014/02/08 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
运动会宣传稿50字
2015/07/23 职场文书
公司年会主持词范文!
2019/05/07 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android