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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
jQuery 表格插件整理
Apr 27 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 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 页面执行时间计算代码
2008/12/04 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
php自动加载机制的深入分析
2013/06/08 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Python中字典的setdefault()方法教程
2017/02/07 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
python——全排列数的生成方式
2020/02/26 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
医学生求职自荐信
2013/10/25 职场文书
安全协议书范本
2014/04/21 职场文书
送给客户微信问候语!
2019/07/04 职场文书
python实现自动化群控的步骤
2021/04/11 Python
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers