Hugh 已赞助30元宋小强 已赞助10元
红豆生南国，春来发几枝
当前位置：
& JQ的ajax点击事件只执行第一次的解决方案
最近在项目中用到了ajax的方法，在中途遇到了一个小障碍，ajax请求是正确的，可是点击事件只执行第一次点击，第二次点击的时候就无效了，只有刷新页面之后才可以点击，点击之后再点击还是无效。代码如下：
$(".ttx").click(function(){
var abc=$(this).attr('id');
url: 'user.php?act=tuan_check',//请求地址
type: 'GET',//用get方式获取
dataType: 'html',//请求数据类型为html
data: {user_id:abc,pass:"yes"},//重要：请求地址后面所带参数，格式/user.php?act=tuan_check&user_id=abc&pass=yes
contentType: "application/ charset=utf-8",//请求内容格式
timeout: 10000,//超时10秒后报错
success: function(data){//请求成功后执行的函数，可以用alert(data);看看请求的数据以查看通过率
$('#'+abc).removeClass('ttx').addClass('bfo2').html("已通过");
error: function(err){//请求失败后执行的函数
alert("正在请求，请稍候...");
这个也是标准的ajax请求后台数据代码，进行前台会员审核通过与不通过的ajax操作，大家参考一下。只是点击事件出现了问题，其实是这种click写法对动态写入的dom无效，因为第一次点击的时候我改变了class值，所以单纯的click无法找到更改的class，所以只适合单一的点击事件，修复后代码如下：
$(".ttx").live('click',function(){
var abc=$(this).attr('id');
url: 'user.php?act=tuan_check',
type: 'GET',
dataType: 'html',
data: {user_id:abc,pass:"yes"},
contentType: "application/ charset=utf-8",
timeout: 10000,
success: function(data){
$('#'+abc).removeClass('ttx').addClass('bfo2').html("已通过");},
error: function(err){
alert("正在请求，请稍候...");
扩展阅读：jq的点击事件大全：
1.bind绑定事件
$("#qiuye").bind('click',function(){...});
绑定事件，可绑定多个事件：
$('#qiuye').bind('click mouseover',function(){...});
可绑定多个处理函数：
$('#qiuye').bind({
click:function(){...},
mouseover:function(){...}
2.One一次性点击，只执行第一次点击，第二次点击将不再起作用，除了刷新页面。
$('#qiuye').one('click',function(){
alert('a');
3.live可绑定动态添加的html元素，用js写入的文档一样可以识别。
$('#qiuye').live('click,function(){...})
转载请保留链接： | 出处：| 本文链接地址：
阅读本文的用户还浏览了
揭露一种ajax跨域病毒...
WordPress前台异步ajax登录、...
Ajax网页技术对网站SEO无影响...
Ajax重载页面js脚本代码失效的解决办...
卢哥ajax主题下载...
全站ajax技术实现的通用方法...
总共有: 9条评论
1.718秒内67次SQL查询|内存29MB
版权所有&& -&秋叶网络博客jquery实现input输入框实时输入触发事件代码 ---jQuery 中bind(),live(),delegate(),on() 区别
时间： 12:56:32
&&&& 阅读：923
&&&& 评论：
&&&& 收藏：0
标签：复制代码 代码如下:
&input id="productName" name="productName" value="" /&&
复制代码 代码如下:
//绑定$(‘#productName‘).bind(‘input propertychange‘, function() {searchProductClassbyName();});&
复制代码 代码如下:
searchProductClassbyName 为触发后调用的方法；
当我们试图绑定一些事件到DOM元素上的时候，我相信上面这4个方法是最常用的。而它们之间到底有什么不同呢？在什么场合下用什么方法是最有效的呢?
准备知识：
当我们在开始的时候，有些知识是必须具备的：
下图仅仅是一个示例，这是一个在browser环境下的一棵模拟DOM树，在下面的代码中仅起到演示的作用：
Event bubbling (aka event propagation)冒泡
我们的页面可以理解为一棵DOM树，当我们在叶子结点上做什么事情的时候（如click一个a元素），如果我们不人为的设置stopPropagation(Moder Browser), cancelBubble(IE)，那么它的所有父元素，祖宗元素都会受之影响，它们上面绑定的事件也会产生作用。看一个示例：
$(‘a‘).bind(‘click‘, function() { alert("That tickles!") });
当我们在a 上面点击的时候，首先会触发它本身所绑定的click事件，然后会一路往上，触发它的父元素，祖先元素上所有绑定的click事件，就像下图演示的那样。
&为了对下面的代码进行演示，添加一些HTML代码：
&ul id="members" data-role="listview" data-filter="true"&
&!-- ... more list items ... --&
&a href="detail.html?id=10"&
&h3&John Resig(jQuery的作者)&/h3&
&p&&strong&jQuery Core Lead&/strong&&/p&
&p&Boston, United States&/p&
&!-- ... more list items ... --&
.bind()是最直接的绑定方法&，会绑定事件类型和处理函数到DOM element上, 这个方法是存在最久的，而且也很好的解决了浏览器在事件处理中的兼容问题。但是这个方法有一些performance方面的问题，看下面的代码：
/* The .bind() method attaches the event handler directly to the DOM
element in question ( "#members li a" ). The .click() method is
just a shorthand way to write the .bind() method. */
$( "#members li a" ).bind( "click", function( e ) {} );
$( "#members li a" ).click( function( e ) {} );
上面的两行代码所完成的任务都是一致的，就是把event handler加到全部的匹配的&a&元素上。这里存在着一些效率方面的问题，一方面，我们隐式地把click handler加到所有的a标签上，这个过程是昂贵的;另一方面在执行的时候也是一种浪费，因为它们都是做了同一件事却被执行了一次又一次（比如我们可以把它hook到它们的父元素上，通过冒泡可以对它们中的每一个进行区分，然后再执行这个event handler）。
这个方法提供了一种在各种浏览器之间对事件处理的兼容性解决方案
非常方便简单的绑定事件到元素上
.click(), .hover()...这些非常方便的事件绑定，都是bind的一种简化处理方式
对于利用ID选出来的元素是非常好的，不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时，handler可以立即被执行(相对于后面的live, delegate)实现方式
它会绑定事件到所有的选出来的元素上
它不会绑定到在它执行完后动态添加的那些元素上
当元素很多时，会出现效率问题
当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题
.live()方法用到了事件委托的概念来处理事件的绑定。它和用.bind()来绑定事件是一样的。.live()方法会绑定相应的事件到你所选择的元素的根元素上，即是document元素上。那么所有通过冒泡上来的事件都可以用这个相同的handler来处理了。它的处理机制是这样的，一旦事件冒泡到document上，jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。jquery 1.8.2的源码：
当handler在执行的时候，因为有冒泡的参与，确实会有一些延迟，但是绑定的时候是特别的快。
上面的code在和.bind()相比的时候有一个好处就是我们不需要在每个元素上再去绑定事件，而只在document上绑定一次就可以了。尽管这个不是最快的方式，但是确实是最少浪费的。
这里仅有一次的事件绑定，绑定到document上而不像.bind()那样给所有的元素挨个绑定
那些动态添加的elemtns依然可以触发那些早先绑定的事件，因为事件真正的绑定是在document上
你可以在document ready之前就可以绑定那些需要的事件
从1.7开始已经不被推荐了，所以你也要开始逐步淘汰它了。
Chaining没有被正确的支持
当使用event.stopPropagation()是没用的，因为都要到达document
因为所有的selector/event都被绑定到document, 所以当我们使用matchSelector方法来选出那个事件被调用时，会非常慢
当发生事件的元素在你的DOM树中很深的时候，会有performance问题
.Delegate()
.delegate()有点像.live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.
你可以选择你把这个事件放到那个元素上了
chaining被正确的支持了
jQuery仍然需要迭代查找所有的selector/event data来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素。
可以用在动态添加的元素上
需要查找那个那个元素上发生了那个事件了，尽管比document少很多了，不过，你还是得浪费时间来查找。
&其实.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的，这是1.8.2的源码：
看一下，我们用如何用.on()来改写前面通过&.bind(), .live(), .delegate()所注册的事件：
/* The jQuery .bind(), .live(), and .delegate() methods are just one
line pass throughs to the new jQuery 1.8.2 .on() method */
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );
$( document ).on( "click", "#members li a", function( e ) {} );
$( "#members li a" ).live( "click", function( e ) {} );
// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );
提供了一种统一绑定事件的方法
仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()
也许会对你产生一些困扰，因为它隐藏了一前面我们所介绍的三种方法的细节。
用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上
不要再用.live()了，它已经不再被推荐了，而且还有许多问题
.delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。
我们可以用.on()来代替上述的3种方法
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！需求发布后1小时内收到服务商响应每个需求平均有10个服务商参与95%以上的需求得到了圆满解决所有需求不向雇主收取任何佣金电商旺铺用他们在大促卖卖卖？
寻“跳转指定页面后，自动触发一个点击事件”的网页代码
有相似问题想解决?专业顾问来帮助您
已投标服务商
综合评分：5颗星
速度：5.00
服务：4.93
态度：4.97
好评率：98.55%
共有6个服务商参与报价，查看更多服务商报价
参与报价,开始赚钱
提交你的报价和方案
中标后交付作品
获得任务赏金
极速：10分钟急速响应
高品质：精选服务商提供服务
放心：不满意可退款
根据浏览的需求为您推荐
交易成功的需求
网站定制开发相关需求
关注猪八戒微信请问，点击按钮触发事件，如何获取该触发的js函数/事件？谢谢【chrome吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：150,650贴子：
请问，点击按钮触发事件，如何获取该触发的js函数/事件？谢谢收藏
请问，诸位吧友。外联了多个js文件（太多。。）。在页面中点击某按钮，如何知道该动作所触发的js代码。第一种：&div onclick=&add('修改首页风格','userController.do?changestyle')& name=&& href=&& class=&menu-item& &首页风格&/div&虽然有了add()函数名，因为js太多，搜索不方便。。第二种：&input type=&button& value=&确定& class=&ui_state_highlight&&&input type=&button& value=&关闭&&“确定”按钮有class，尝试去搜js文件里搜索，可能搜到绑定的函数，但是“关闭”按钮没有class，该按钮也能正常工作。。。请问：怎么知道某按钮触发某事件后所执行的js代码？我查找后，感觉比较好的是：wypz200888 | 六级
用chrome浏览器事件监听勾上click然后单击按钮，就会自动断点到即将执行的代码上，并且可以调试但是一直不知道怎么在事件监听里-勾上click，
请知道的吧友，告诉我一下。 谢谢了。
AutoTDS-V1型全自动热解吸仪是一款20位常温二次全自动热解吸仪，气路采....
顶一下。。
class跟的是css样式名，不是js，用asp.net，php什么的开发的网站直接在按钮里写函数，服务器运行，不用js也行。
devtools source面板右边
怎么召唤不了
为啥我没明白楼主要表达的意思呢
我没讲清楚，不好意思。 比如，一个按钮，我给它添个，onclick=&add(&fd&,&qw&)&事件，而这个页面外联了10个js文件（体现：多而杂），那我应该去项目里全局搜一下，add或者 function add( 但是恰好，这10个js文件里，有多个add 函数（多，应该可以存在多个吧？），很难找到是哪个。有没有利用谷歌开发者工具，能快速知道触发的是哪个函数，在哪个js文件里，哪段代码？
还有，就是知道了class名或者不知道class名， 通过Jquery绑定事件， 怎么知道触发的是哪个函数，在哪个js文件里，哪段代码
围观无头学妹
亚马逊AWS-云创计划.最高可达10万元免费云资源!
围观乌头学妹
打断点可破
我也想知道楼主怎么解决的，我现在也有这个问题
你现在问题解决没有，我用谷歌浏览器调试时候也是光在jquery里边跳，最后怎么解决的
FireBug里面绑定事件的元素后面都有标记，点击标记点击需要看的事件就能看到触发事件的代码，但是一些控件的代码比较复杂
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或}