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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
flash javascript之间的通讯方法小结
Dec 20 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
js实现目录定位正文示例
Nov 14 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
vue watch关于对象内的属性监听
Apr 22 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/01/20 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
js的[defer]和[async]属性
2014/11/24 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
express express-session的使用小结
2018/12/12 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
Python解惑之True和False详解
2017/04/24 Python
python生成二维码的实例详解
2017/10/29 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
python标识符命名规范原理解析
2020/01/10 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
2014年最新领导班子整改方案
2014/09/27 职场文书
慰问信范文
2015/02/14 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
首次购房证明
2015/06/19 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js