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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
node.js中express-session配置项详解
May 31 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
JS+CSS实现3D切割轮播图
Mar 21 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文档更新介绍
2011/07/22 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
js中的面向对象入门
2017/03/06 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
详解vue路由
2020/08/05 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
wxPython框架类和面板类的使用实例
2014/09/28 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
python调用摄像头拍摄数据集
2019/06/01 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
一个入门级python爬虫教程详解
2021/01/27 Python
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
2014离婚协议书范文两篇
2014/09/15 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
重阳节慰问信
2015/02/15 职场文书
同学聚会感言一句话
2015/07/30 职场文书
学校财务管理制度
2015/08/04 职场文书