进入新的公司以来,开发一个新的功能,需要在页面加载之后添加一个live事件,做一个div的展示与隐藏功能,代码如下:
$(function(){ 。。。。。。。。 。。。。。。 $(".toggle-detail").live("click", function(e) { var event = e || window.event; event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); $(this).parents('.hotel-item').find('.adjust-product-item-detail').toggle();//关键这行 $(this).find("i").toggleClass("arrow-up"); }); });
因为这个页面引用了大量的js,以及样式,加载时间有点长,上面是在页面加载之后应该进行绑定的live事件。还有根据业务需求会动态刷新返回修改这个div(点击一个按钮会局部刷新当前div重新加载)。
结果bt的测试在进行测试的时候,点击这个div(toggle-detail)出现时而有效时而无效的问题。
既然是有时好用有时不好用,而且跟踪是有对应的id元素的,解释的原因就是在进行live绑定的时候,对应的元素可能没有渲染完成(虽然最后我们加载完成的时候看到了div),那在click的事件加了一个延迟看下:
function toggleDiv(obj,isHidden){ if(isHidden>0){ $(obj).parents('.hotel-item').find('.adjust-product-item-detail').show(); }else{ $(obj).parents('.hotel-item').find('.adjust-product-item-detail').hide(); } } $(".toggle-detail").live("click", function(e) { var parent_div = $(this).parents('.hotel-item'); var item_detail_hidden = parent_div.find('.adjust-product-item-detail:hidden').size(); if(item_detail_hidden>0){ var jj = this; setTimeout(function(){toggleDiv(jj,item_detail_hidden);},100); }else{ var jj = this; setTimeout(function(){toggleDiv(jj,item_detail_hidden);},100); } $(this).find("i").toggleClass("arrow-up"); });
这里在进行live单击的时候,延迟执行切换div显示的工作,结果就好了。
就这样,通过在setTimeout进行一些处理就可以了,没有出现之前的bug了。
在很多时候都可能还有这样的情况,虽然是预期应该有div,有绑定好事件,但是发现就是无效。那不妨js加载的时候,延迟一下看看。
ps:在解决另外一个bug的时候,也用了这个setTimeout进行事件的绑定,哈哈。