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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 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 ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Python程序运行原理图文解析
2018/02/10 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python实现动态数组的示例代码
2019/07/15 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
基于python图像处理API的使用示例
2020/04/03 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
毕业设计计划书
2014/01/09 职场文书
个人授权委托书
2014/04/03 职场文书
初中生评语大全
2014/04/24 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2014财务年终工作总结
2014/12/08 职场文书
卖车协议书范文
2016/03/23 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题