登录  /  注册
首页 > web前端 > js教程 > 正文

jquery中live方法换on方法出现问题的解决办法详解

黄舟
发布: 2017-06-26 09:35:21
原创
1224人浏览过

我未来追加的元素 是 ajax拼接的 
我的on是这样写的  

$("td").on("click","a",function(){
alert("Aha!");
});
登录后复制

这是 页面的标签

<td><a class="topic_a" href="#creat"  name=&#39;${data.context }&#39;>选择</a></td>
登录后复制

ajax拼接标签和上面标签一模一样的 。

但我拼接的标签点击没有效果。
为什么啊?

请确保 你用on绑定的时候 td 已经存在与dom中了..
还有..为什么live 可以 因为live 是绑定在docuement上的..任何时候 document都是存在的..
你用的on 你的事件是绑定在td上的..如果当td不存在的时候 肯定就绑定不上了

请多了解 事件代理机制.

用delegate来替换吧

未来追加的元素中包括 么?
包括 的话就不能在 $("td")上绑定事件代理。
应该在更上层的元素上绑定事件代理
比如

或者
的父元素
实在不行在body或者document上绑定也可以

$("body").on("click","a",function(){
alert("Aha!");
});
登录后复制
登录后复制

用on bind 这种。
先拼接,然后添加到页面上,接下里在绑定事件。
js里面,一样是逐行读取的。

绑定事件写在前面,之后来添加的td,当然就不会有这个事件。
同时确保,td已经写入到页面当中。

live方法是旧版本的jquery才有,on方法只能使用在页面上已有的标签;
想获取未来元素,只能用delegate方法了,具体写法如下:

//div是页面已经有的元素,button是js生成的未来元素!
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});
登录后复制
 $(document).on(&#39;click&#39;, &#39;td a&#39;, function() {
    alert("Aha!");
  });
登录后复制
 $("body").delegate("td","click",function(){
    alert("ok!");
  });
登录后复制

请确保 你用on绑定的时候 td 已经存在与dom中了..
还有..为什么live 可以 因为live 是绑定在docuement上的..任何时候 document都是存在的..
你用的on 你的事件是绑定在td上的..如果当td不存在的时候 肯定就绑定不上了

请多了解 事件代理机制.

你这样写吧

$("body").on("click","td a.topic_a",function(){
alert("Aha!");
});
登录后复制

未来追加的元素中包括

么?
包括
的话就不能在 $("td")上绑定事件代理。
应该在更上层的元素上绑定事件代理
比如或者
的父元素
实在不行在body或者document上绑定也可以

$("body").on("click","a",function(){
alert("Aha!");
});
登录后复制
登录后复制

以上就是 jquery中live方法换on方法出现问题的解决办法详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号