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面向对象编程之对象使用分析
Aug 19 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
JS实现多选框的操作
Jun 24 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 curl 并发最佳实践代码分享
2012/09/05 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
PHP实现微信对账单处理
2018/10/01 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
Javascript 继承实现例子
2009/08/12 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
Vue.js添加组件操作示例
2018/06/13 Javascript
vue生命周期的探索
2019/04/03 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
详解Python传入参数的几种方法
2019/05/16 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
pandas DataFrame运算的实现
2020/06/14 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
商务经理岗位职责
2014/07/30 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python
Elasticsearch 批量操作
2022/04/19 Python