jqeury点击·时间(click)失效的原因和解决办法

关于jquery的点击事件的比较,发现在某种情况下点击事件不管用了;将使用三种点击触发事件进行比较,可以看出一些端倪,对于开发者而言,想必是十分有用的;

我们将用到三种点击触发事件来比较,分别是:

$(‘‘).click(function(){}); // 指定对象

$(document).on(‘click‘,‘‘,function(){}); // 获取整个网页文档对象来指定

function a_test_func(){}; // 调用函数

这里我将写出两个a标签来完成数据点击的测试,网页效果如下:

<a href="http://www.chenglin.name/wp-content/uploads/2014/02/1.png"><img src="http://www.chenglin.name/wp-content/uploads/2014/02/1.png" alt="1" width="323" height="146" class="alignnone size-full wp-image-485" /></a>

可以看到两个a标签,一个名字为 a_test,一个为a_add.分别代表一下意思:

a_test:默认在网页中直接写一个a标签

a_add: 使用js函数在a_test后面追加一个a标签名为a_add;

a_test直接写入网页,a_add由函数追加的代码,他们两个都有一个class为a_test;代码如下:

<a class="a_test" href="#" onclick="a_test_func()">a_test</a>

<script type="text/javascript">

$(‘.a_test‘).click(function(){

console.log(‘jquery‘);

});

// 获取整个网页文档对象

$(document).on(‘click‘,‘.a_test‘,function(){

console.log(‘document‘);

});

// 函数

function a_test_func(){

console.log(‘********************‘);

console.log(‘function‘);

}

function a_add(){

$(‘.a_test‘).after(‘<a class="a_test" href="#" onclick="a_test_func()">a_add</a>‘);

}

a_add();

</script>

我将从consol

e输出来查看两个a标签点击的结果,首先看没有点击的时候:

原文链接:http://www.chenglin.name/web/js-web/484.html

点击第一个a标签,这个是直接写入网页的:

原文链接:http://www.chenglin.name/web/js-web/484.html

点击第二个a标签,这个是代码追加的:

原文链接:http://www.chenglin.name/web/js-web/484.html

可以看到差异了吧,发现追加的第二个a标签,没有输出:

$(‘‘).click(function(){}); // 指定对象的点击结果 jquery

这样可以得出结论,关于网页追加的代码,是不能使用

$(‘‘).click(function(){}); // 指定对象的

总结一下,推测上面这个监听函数,是在网页加载的时候就指定了对象,而通过代码追加,如json追加,的元素,是不能在匹配这个事件的。

以后可以统一使用,以下的方法来避免,失效的问题:

$(document).on(‘click‘,‘‘,function(){}); // 获取整个网页文档对象来指定

function a_test_func(){}; // 调用函数

对于这个两个方法,是元素在点击事件后才进行处理,所有使用后面两种方法,可以避免点击事件在一些未知的情况下失效…….大家可以拷贝上面的代码,指定jquery试一下~~

chenglin博客,原文链接:http://www.chenglin.name/web/js-web/484.html

时间: 2024-10-14 11:17:43

jqeury点击·时间(click)失效的原因和解决办法的相关文章

js报TypeError $(...) is null错误,jquery失效的原因及解决办法

最近在工作中发现个问题,原本好好的网页,写了一些自己的jquery代 码之后,竟然总是不起作用,无论写的多么简单,都不起作用,似乎jquery失效了一般,在火狐下调试看了下,页面报TypeError $(...) is null这种错误,找了半天原因最后发现竟是页面中加载的一个插件给捣的鬼,是它将jquery的$方法给覆盖了.对于这个问题,现在分享两种解决方法. (1)删冲突插件,jquery作为基础库,当然是没有理由被删了.这个方法最直接了. (2)将jquery的$方法改名,具体改名方法如下

Spring3.x事务失效的原因以及解决办法

项目中如果使用spring来管理事务,可能会出现事务失效的情况,我认为主要的原因是cglib无法获取到代代理的实例.. 如果带上事务,那么用annotation方式的事务注解和bean配置,事务会失效,要将service的bean配置到xml文件中才行,这样springmvc就不会扫描到@Service的类了 这个问题有另一种解决办法: 首先在主容器中(applicationContext.xml),将Controller的注解排除掉 <context:component-scan base-p

百度地图API 与 jquery 同时使用时报 TypeError $(...) is null错误 失效的原因及解决办法

在引用百度地图API后,发现jquery 根据id 找不到 form.但是对于别的控件没有问题. 在排除了 html加载的问题后. 上网查找 发现以下解决办法: 原因应该是有冲突的插件. 解决办法将 $符号改为jQuery 引用: http://www.phpernote.com/jquery/851.html 最近在工作中发现个问题,原本好好的网页,写了一些自己的jquery代码之后,竟然总是不起作用,无论写的多么简单,都不起作用,似乎 jquery失效了一般,在火狐下调试看了下,页面报Typ

引用Normalize.css之后,flex布局失效的原因以及解决办法

昨天无意知道Normalize.css框架.于是在最近使用了h5属性的项目中引用来玩玩.但是习惯了用通配符去重置.在引用Normalize.css之后各种不适.最直接的影响,比如我对footer header等H5标签容器设置了display:flex;却没有任何效果.打开浏览器审查元素发现, Normalize.css给h5的这些标签预定义了display:block.而且权值非常高,把我自己footer的display:flex覆盖掉了,这就是我设置flex布局属性不起作用的原因. 解决方法

firefox margin-top失效的原因与解决办法

为什么要翻译这篇说明?css2本有人已翻译过,但看一下,很粗糙(不是说自己就怎么怎么样啊,翻译者真的是很值得敬佩的!),近来跟css与xhtml接触得越来越多,但接触得越多,迷惑却总不见少. 现在我觉得很多问题根本不能称之为问题,原因就在于我们的草率理解,比如杀鸡用牛刀,不是不可以,是不合理.不恰当,根源错了,表象也就会错了,如果解决问题从表象入手,难免总会摸不着头脑,还是那句话,要脚踏实地,切莫浮躁. 在这个说明中,"collapsing margins"(折叠margin)的意思是

在同一个类中,一个方法调用另外一个有注解(比如@Async,@Transational)的方法,注解失效的原因和解决方法

在同一个类中,一个方法调用另外一个有注解(比如@Async,@Transational)的方法,注解是不会生效的. 比如,下面代码例子中,有两方法,一个有@Transational注解,一个没有.如果调用了有注解的addPerson()方法,会启动一个Transaction:如果调用updatePersonByPhoneNo(),因为它内部调用了有注解的addPerson(),如果你以为系统也会为它启动一个Transaction,那就错了,实际上是没有的. @Service public cla

@Transational)的方法,注解失效的原因和解决方法

在同一个类中,一个方法调用另外一个有注解(比如@Async,@Transational)的方法,注解是不会生效的. 比如,下面代码例子中,有两方法,一个有@Transational注解,一个没有.如果调用了有注解的addPerson()方法,会启动一个Transaction:如果调用updatePersonByPhoneNo(),因为它内部调用了有注解的addPerson(),如果你以为系统也会为它启动一个Transaction,那就错了,实际上是没有的. @Service public cla

mysql数据库死锁的产生原因及解决办法

这篇文章主要介绍了mysql数据库锁的产生原因及解决办法,需要的朋友可以参考下 数据库和操作系统一样,是一个多用户使用的共享资源.当多个用户并发地存取数据 时,在数据库中就会产生多个事务同时存取同一数据的情况.若对并发操作不加控制就可能会读取和存储不正确的数据,破坏数据库的一致性.加锁是实现数据库并 发控制的一个非常重要的技术.在实际应用中经常会遇到的与锁相关的异常情况,当两个事务需要一组有冲突的锁,而不能将事务继续下去的话,就会出现死锁,严 重影响应用的正常执行. 在数据库中有两种基本的锁类型

SQL数据库损坏的原因和解决办法

现在许多工作人员还在普遍使用SQL SEVER,由于种种原因,SQL数据库会出 现不同程度的损坏,非常影响员工的正常工作.数据的丢失还可能会给公司带 来巨大损失.本文额外大家介绍SQL数据库损坏的原因和解决办法. 当附加数据库文件MDF及日志文件LDF时,报“823”错误.故障出现原因: (1)在数据库读写过程中突然死机或者断电. (2)服务器重启,重启后数据库出现“置疑”状态. (3)磁盘I/O错误 在以上可能的三种突发故障下,由于缓冲数据丢失,数据库无法写入正确 的数据,导致数据结构紊乱,重