解决一个在onload里面live事件绑定无效的bug

进入新的公司以来，开发一个新的功能，需要在页面加载之后添加一个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进行事件的绑定，哈哈。