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 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
js实现表格字段排序
Feb 19 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
Vue ​v-model相关知识总结
Jan 28 Vue.js
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实现文件上传二法
2006/10/09 PHP
mysq GBKl乱码
2006/11/28 PHP
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
一个原生的用户等级的进度条
2010/07/03 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
js尾调用优化的实现
2019/05/23 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
vue实现表格合并功能
2020/12/01 Vue.js
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
python程序需要编译吗
2020/06/19 Python
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
洗煤厂厂长岗位职责
2014/01/03 职场文书
业务总经理岗位职责
2014/02/03 职场文书
大学生暑期实践感言
2014/02/26 职场文书
学前教育专业求职信
2014/09/02 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
《圆的周长》教学反思
2016/02/17 职场文书