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 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
如何使用原生Js实现随机点名详解
Jan 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
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
PHP7 windows支持
2021/03/09 PHP
js控制CSS样式属性语法对照表
2012/12/11 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
JavaScript简介
2015/02/15 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
python实现员工管理系统
2018/01/11 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
如何将json数据转换为python数据
2020/09/04 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
自我评价优秀范文分享
2013/11/30 职场文书
动物科学专业求职信
2014/07/27 职场文书
音乐剧猫观后感
2015/06/04 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
初中生活随笔
2015/08/15 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫