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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
js checkbox(复选框) 使用集锦
Apr 28 Javascript
JS小框架 fly javascript framework
Nov 26 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 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
第十五节--Zend引擎的发展
2006/11/16 PHP
php MYSQL 数据备份类
2009/06/19 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
使用Python的turtle模块画国旗
2019/09/24 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
客服专员岗位职责
2014/02/28 职场文书
计算机网络专业求职信
2014/06/05 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
导游词之唐山景点
2019/12/18 职场文书
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
使用Redis做预定库存缓存功能
2022/04/02 Redis
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技