按钮点击不起作用和点击一次执行两次问题解决

原创 2016年08月29日 10:51:17

1.最初的时候是这种方式写的按钮点击事件,在货主部分正常显示在货运站部分点击无效

$(".descriptionLink").click(function(){        
        if($(this).hasClass("icon-down")){            
            $(this).removeClass("icon-down").addClass("icon-up").html("收起明细");
            $(this).parents(".description-total").siblings(".description-details").slideDown();
        }else{            
            $(this).removeClass("icon-up").addClass("icon-down").html("展开明细");
            $(this).parents(".description-total").siblings(".description-details").slideUp();
        }
    });
2.换了一种方式去写点击事件在货运站中才可以点击,但是会出现点击一次执行两次的情况,表现就是列表展开后立马收起

$(document).on('click','.descriptionLink',function(){        
        if($(this).hasClass("icon-down")){            
            $(this).removeClass("icon-down").addClass("icon-up").html("收起明细");
            $(this).parents(".description-total").siblings(".description-details").slideDown();
        }else{            
            $(this).removeClass("icon-up").addClass("icon-down").html("展开明细");
            $(this).parents(".description-total").siblings(".description-details").slideUp();
        }
    });
3.后面查了一下按这种方式来写,阻止第二次点击,显示正常,查了下这个是因为JQ事件委托导致点击事件多次执行,解决的办法就是对点击事件解绑,也就是off()

$(document).off().on('click','.descriptionLink',function(){        
        if($(this).hasClass("icon-down")){            
            $(this).removeClass("icon-down").addClass("icon-up").html("收起明细");
            $(this).parents(".description-total").siblings(".description-details").slideDown();
        }else{            
            $(this).removeClass("icon-up").addClass("icon-down").html("展开明细");
            $(this).parents(".description-total").siblings(".description-details").slideUp();
        }
    });




相关文章推荐

解决Button多次点击重复执行方法的问题

NSInteger _currentClickNum; //Save the current value of the tag button is clicked //Button click eve...
  • YLGWHYH
  • YLGWHYH
  • 2016年09月27日 20:12
  • 3245

开发日志:使超链接点击一次后失效,让其达到类似按钮disabled的效果

jsp中有一个使用超链接实现提交的功能 HTML:     提交 JS: function btnSub(){ //逻辑判断省略,最后目的是依据条件选择跳转到的Action ...

jquery click点击一次执行两次解决方法

$('#sub').unbind('click').click(function () { ... });

Android 按钮点击两次触发不同的事件

标题:Android 按钮点击两次触发不同的事件 方案:采用flag标记的方式,每次单击标记为0,再次点击判断flag的值 package com.ldl.ui;   import andro...

javascript 点击事件执行两次js问题

因为利用js在页面加载后添加需要点击事件的代码,发现在点击后会代码会执行两次,因为有toggle效果,导致弹窗出现又很快丢失 查了一些资料,发现这是冒泡的原因,需要在点击事件代码中加入阻止冒泡的方法...

Jquery on方法绑定事件后执行多次

这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on(‘click’,function(){}) ...

点击按钮一次,请求两次问题解决

把代码: $("#conmmitBtn").click(function() {}); 改成: $("#conmmitBtn").off().on('click',function() {...

按钮的ajax请求时,一次点击两次提交的问题

原文链接 页面中的按钮的type是submit的: ajax的请求,在JQuery中是:     $(function () {         $('#submit').c...

asp.net中Button按钮点击两次才执行Onclick事件的原因

今天写了一个简单的聊天室,有登录页面和聊天室,当从登录页面跳入到聊天室过后,却发现要点击两次发送按钮才能发送到显示区,然后发送按钮正常运行。       通过不断测试,发现,第一次点击并没有执行...

label的click()事件执行两次

如果你的结构是label内写input实现点击文字时候input也有相应。 并且,把事件设置在了label上,那么就会执行两次了。 jq/js: $(document).ready(function ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:按钮点击不起作用和点击一次执行两次问题解决
举报原因:
原因补充:

(最多只允许输入30个字)