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 相关文章推荐
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
js制作支付倒计时页面
Oct 21 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php程序之die调试法 快速解决错误
2009/09/17 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
python SVD压缩图像的实现代码
2019/11/05 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
python中最小二乘法详细讲解
2021/02/19 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
高中班长自我鉴定
2013/12/20 职场文书
经销商培训邀请函
2014/01/21 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
汽车促销活动方案
2014/03/31 职场文书
《白鹅》教学反思
2014/04/13 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
北京故宫导游词
2015/01/31 职场文书
运动会广播稿20字
2015/08/19 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python