解决一个在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）出现时而有效时而无效的问题。

尝试1：我开始怀疑是这个find找不到对象，然后添加了很多的console.log打印各个索引的对象：

console.log($(this).parents('.hotel-item').find('.adjust-product-item-detail').size());

结果是没有问题的可以输出。

尝试2：又想到用其他的jquery检索去看一下是否可以找到需要toggle的div，换一种查询方式看看。

$(this).parents(".item-name").siblings(".adjust-product-item-detail").toggle();

结果，依然如此 有时好用 有时不好用

尝试3：怀疑是否是因为toggle（）的bug呢？如果使用hide()和show()，自己进行控制div的显示。根据当前div是显示还是隐藏进行控制。

var item_detail_hidden = parent_div.find('.adjust-product-item-detail:hidden').size();
if(item_detail_hidden>0){
	parent_div.find('.adjust-product-item-detail').show();
}else{
	parent_div.find('.adjust-product-item-detail').hide();
}

结果，有时候是好用，随着进行不停切换div（点击更换按钮动态加载这里的div，动态重新live绑定事件），依然不好用。

尝试4：既然是有时好用有时不好用，而且跟踪是有对应的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进行事件的绑定，哈哈。