【jquery】 click事件失效失效问题。。。。。

jquery动态改变onclick属性导致失效的问题解决方法
代码如下: &li id="" onclick =""&&/li&
虽然在很多时候,都是非常不推荐这样写的,但是还有有些时候会碰到这样的代码。 那么你可能在某些时候需要去修改onclick 的属性如下:
代码如下: $("#id").attr("onclick",url);
这样的代码,在chrome和firefox 中可以得到你想要的结果。 遗憾的是在ie中,至少是ie7 以下是没有效果的,至于i8好像也是没有效果的。 办法就是使用jquery 绑定.
代码如下: $("#id").attr("onclick","").click(function(){ // });
这里需要先清除onclick属性的值,再去绑定方示。 如果本来就没有设定onclick属性,刚不需要清除.
代码如下: $("#id").click(funciton(){ // });
顶一下(0) 踩一下(0)
热门标签:&&等jquery设置html li点击click事件为什么无法赋值到表单input value中呢?小弟最近在做一个项目。用到了闭包的问题,是这样的,页面中有一堆li(动态加载的),点击某一个的时候获取对应的index,然后把index赋值到input标签中的value,但是怎么都赋值不上。不知道咋回事。请牛牛们指教。先给4个牛B吧(弟弟穷!!)方式1(直接赋值):$(&.evaH_week li&).each(function(index){&& &$(this).click(function(){&& &&& &aa = $(this).index();&& &&& & alert(aa); & // 点击第一个,打出来0& & & & &$(&#liIndex&).val(aa);&//后台捕获不到数据。显示的是空&& &});})方式2(闭包传递):&& &var aa = &&;$(&.evaH_week li&).each(function(index){&& &$(this).click(function(){&& &&& &aa = $(this).index();&& &&& & alert(&neibu:&+aa); & //点击第一个,打出来0&& &});})&& &&& &alert(&waibu&+aa); &//打印空&& &&& &$(&#liIndex&).val(aa);4个牛币所有回答列表(1)&LV1方式1(直接赋值),测试没什么问题,可以赋值到表单input value中。方式2(闭包传递)也是绑定了click事件,应该也可以赋值到表单input value中。就不知道LZ怎么写的等等等等等等等等等等完完最热搜索问答话题编程语言基础Web开发数据库开发客户端开发脚本工具游戏开发服务器软硬件开源组件类库相关问答等完等完等完等完等等完等最近浏览暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友程序让生活更美好,这里有很多值得你探索,感谢您留下的每一个脚印
jQuery 1.9/2.0/2.1及其以上 on 无效的解决办法
日 |  | 浏览: 12,734
jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替。本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数中遇到的一些问题。
jQuery on函数语法
$(selector).on(event,childSelector,data,function,map)
各个参数说明如下:
必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
childSelector
可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
可选。规定传递到函数的额外数据。
可选。规定当事件发生时运行的函数。
规定事件映射 ({event:function, event:function, …}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。
按照上面的语法下面的例子是可以实现的
&!DOCTYPE html&
&script src=&/jquery/1.10.2/jquery.min.js&&
$(document).ready(function(){
$(&p&).on(&click&,function(){
alert(&The paragraph was clicked.&);
&p&Click this paragraph.&/p&
但是如果要绑定的on方法是动态加载出来的元素,那么这样使用就是没有用的。看下面的例子:
&!DOCTYPE html&
&script src=&/jquery/1.10.2/jquery.min.js&&
$(document).ready(function(){
$(&#div1&).click(function(){
$(&&div class='test'&test&/div&&).appendTo($(&#div1&));
$(&.test&).on(&click&,function(){
$(&.test&).css(&background-color&,&pink&);
$(&#div2&).bind(&click&,function(){
$(this).css(&background-color&,&pink&);
&h4 style=&color:&&This example demonstrates how to achieve the same effect using on() and bind().&/h4&
&div id=&div1& style=&border:1&&This is some text.
&p&Click to set background color using the &b&on() method&/b&.&/p&
&/div&&br&
&div id=&div2& style=&border:1&&This is some text.
&p&Click to set background color using the &b&bind() method&/b&.&/p&
上面例子中.test元素是动态加载的,但是给它绑定click方法的时候,明明使用了
$(&.test&).css(&background-color&,&pink&);
将背景色设为pink,但是没有起作用,什么原因呢,原因就在于.test是动态加载的元素,而使用上面的方法不能绑定动态加载元素的事件,修正的方法为使用下面的代码代替:
&!DOCTYPE html&
&script src=&/jquery/1.10.2/jquery.min.js&&
$(document).ready(function(){
$(&#div1&).click(function(){
$(&&div class='test'&test&/div&&).appendTo($(&#div1&));
$(document).on(&click&,&.test&,function(){//修改成这样的写法
$(&.test&).css(&background-color&,&pink&);
$(&#div2&).bind(&click&,function(){
$(this).css(&background-color&,&pink&);
&h4 style=&color:&&This example demonstrates how to achieve the same effect using on() and bind().&/h4&
&div id=&div1& style=&border:1&&This is some text.
&p&Click to set background color using the &b&on() method&/b&.&/p&
&/div&&br&
&div id=&div2& style=&border:1&&This is some text.
&p&Click to set background color using the &b&bind() method&/b&.&/p&
究其元素就在于使用$(document)意义就在于使元素加载完后才执行方法,所以当为jQuery动态加载的元素绑定on方法的时候,使用$(document)设置代码脚本在DOM元素加载完成后开始执行。
作者:知道91
除非注明,本文原创:,欢迎转载!转载请以链接形式注明本文地址,谢谢。原文链接:
当我们填写用户地址的时候,需要填写用户的地址,对于全球的用户我们不能让用户任意输入地址,需要的是让用户选择地址,而不是填写。但是全球的国家众多,每个国家的州/...
在我们使用JQuery开发的过程中我们有时会根据浏览器窗口的位置定位,本文讲解一下获取浏览器窗口尺寸、文档尺寸、以及浏览器滚动条尺寸的一些方法。
在网页特效中经常需要使用到Tab选项卡的特效,实现这种特效需要使用HTML、CSS、JS的综合运用。实现Tab选项卡介绍了使用jQuery UI和自定义实现HTML Tab 选项卡的两种方法。
本文介绍了JS/jQuery 实现Combobox可输可选下拉框的方法,可以通过Ajax实现动态加载可输可选下拉框的选项,可以在下拉框中输入一个新值动态添加一个数据选项,同样可以...
zTree 是一个依靠 jQuery 实现的 Tree/TreeView 熟悉插件, zTree 最大优点是具有灵活的配置、优异的性能、多种功能的组合。本文详细介绍了通过zTree实现jQuery设置Tree...
HTML&jQuery横向循环左右滚动导航方法讲解,实现了基于jquery可配置循环左右滚动例子讲解,可以实现横向滚屏,左右移动,适合做滚动导航。
一个北漂程序员的一些故事,简单的介绍了关于IT的一些事情,有欢乐,也有辛苦,不过现在回头来看这些事,觉得一切好像都是值得的。
本文介绍了写好博客提高网站访问流量的方法。博客是一个很好的方式来让每人了解每个家庭的最新的新闻,如没有运行的电话账单,你也可以查看重要更新了解最新的消息。
本文介绍了 C#/.NET Linq GroupBy 多个字段写法,同时也介绍了lambda版本的两种写法。
本文介绍了node.js这个服务器端语言的主要特性和node.js所具备的优点,梳理了node.js流行的原因和其基本的原理和运行机制。
本文通过代码形象举例讲解了控制反转(IoC)和依赖注入(Dependency Injection)的概念,分析了参与角色、IOC容器,并阐述了依赖注入的3种方式。
本文讲解了使用jQuery的Ajax的JSONP方法实现跨域请求数据的方法,通过示例代码讲解了C#服务端代码接受跨域的Ajax请求。
在jQuery的Ajax请求中设置Type的时候我们一般会选择GET和POST,但是这两者之间的区别我们很少去关注,甚至基本就不知道是有什么区别,在混合着使用。今天这里知道91就好...
本文介绍了一款提供免费下载的翻墙代理软件,这是绿豆加速器旗下的一款超级VPN产品,它提供了在安卓、苹果手机和PC端提供翻墙的方法,同时支持chrome浏览器插件翻墙模式...
本文讲解了使用jQuery的Ajax的JSONP方法实现跨域请求数据的方法,通过示例代码讲解了C#服务端代码接受跨域的Ajax请求。
本文通过代码形象举例讲解了控制反转(IoC)和依赖注入(Dependency Injection)的概念,分析了参与角色、IOC容器,并阐述了依赖注入的3种方式。
本文介绍了node.js这个服务器端语言的主要特性和node.js所具备的优点,梳理了node.js流行的原因和其基本的原理和运行机制。
本文介绍了 C#/.NET Linq GroupBy 多个字段写法,同时也介绍了lambda版本的两种写法。
本文介绍了关于CSS 技术、CSS...
本文介绍了写好博客提高网站...
本文介绍了 C#/.NET Linq Gro...
本文介绍了一款提供免费下载...
一个北漂程序员的一些故事,...
本文介绍了node.js这个服务器...
网站合作和广告投放
联系邮箱:
(加好友请注明来意)
诚意交换友情链接
网站使用问题
请直接询问或者反馈,您也可以在网站直接给我们留言,谢谢!
欢迎关注知道91博客
(C) 2014 保留所有权利.&nbsp
由长期支持jQuery 事件 - click() 方法
jQuery 事件 - click() 方法
当点击按钮时,隐藏或显示元素:
$(&button&).click(function(){
$(&p&).slideToggle();
定义和用法
当点击元素时,会发生 click 事件。
当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。
click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。
触发 click 事件
$(selector).click()
将函数绑定到 click 事件
$(selector).click(function)
可选。规定当发生 click 事件时运行的函数。jQuery on()方法绑定动态元素的点击事件-jQuery学习
当前位置: &
& jQuery on()方法绑定动态元素的点击事件
jQuery on()方法绑定动态元素的点击事件
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持,于是乎到处查资料,问网友,结果找了好久在一篇文章中终于找到了答案。。。
jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。生成的按钮基数项on方法点击无效live方法有效。
比如页面上有下边两个元素:
&input type=&button& name=&addbtn& value=&按钮添加& /&
&div id=&test&&&/div&
使用下边的jQuery代码大家可以对比看看区别:
$(function () {
var a = 1,
$_div = $('#test');
$('input[name=addbtn]').on('click', function () {
$_div.append('&input type=&button& name=&test' + a + '& value=&按钮' + a + '&/&');
//偶数项点击事件
$_div.on('click', 'input[name^=test]:even', function () {
alert('我是有效的on方法,你能看见我吗:' + this.value);
//奇数项绑定的点击事件
发现点击无效,而是用live方法却能够支持
$('input[name^=test]:odd').on('click', function () {
alert('我是无效的on方法,你不能看见我');
//奇数项绑定的点击事件
发现点击无效,而是用live方法却能够支持
$('input[name^=test]:odd').live('click', function () {
alert('我是live方法,你能看见我吗:' + this.value);
代码简单,就不放演示页了,如果有什么不明白的,可以留言。
作者:广州-wj
除非注明,文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:
本月最热文章}

我要回帖

更多关于 jquery click失效 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信