进入新的公司以来,开发一个新的功能,需要在页面加载之后添加一个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进行事件的绑定,哈哈。
相关推荐
脱离document.onload和window.onload的onload事件,可多次添加加载事件!
javaScript的onload事件的代码,javaScript内嵌在html中。
为了让函数只在页面加载完毕后才得到执行,我们会把函数绑定到onload事件上: [removed] = userFunction 但如果有两个函数:firstFunction() 和 secondFunction(),都想让它们在页面加载完毕后得到执行,该怎么办?...
在需要对img进行onload事件绑定的时候,一般大家都会想到用常规的方法进行事件绑定此时大家会发现alert(1)并没有执行,这是什么原因呢?特别是在ie和ff浏览器下这是为什么呢,本文将详细为您解答
NULL 博文链接:https://snandy.iteye.com/blog/666530
ie 处理 gif动画 的onload 事件的一个 bug
主要介绍了IE中图片的onload事件无效问题和解决方法,这是一个很经典的问题,其实只需要调换一下代码顺序即可解决,需要的朋友可以参考下
网页加载完毕时会触发一个onload事件,将函数绑定到这个事件上即可。 复制代码 代码如下: [removed] = myFunction; 问题来了:如果需要同时绑定多个事件,该如何处理呢?有两种解决方法 方案一 创建一个匿名函数,...
今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件。 代码如下: 代码如下:var loadJs = function(src, fun){ var script = null; script = document.createElement(“script...
本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执行了。 //app.js App({ onLaunch: ...
基于jquery开发的一个小插件,主要作用是绑定图片(img标签)的onload事件,如果是纯JavaScript开发,可借鉴下面的代码: var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if ...
在工作时,我们给一个元素绑定了事件,如果dom还没加载完成,就执行了js代码,就不会绑定成功。常规解决方案就是用: [removed] = EventFunction; 可是如果有两个 事件, [removed] = EventFunction1; [removed] =...
有需要的朋友是最好的参考资料。希望有所帮助!
主要介绍了js的image onload事件使用遇到的问题,需要的朋友可以参考下
故事模式实现是只加载当前浏览的照片和它下面的两张照片,加载照片的时候才会加载和渲染评论区,图片没有加载前会用一个一象素的图片占位,并用一个loading类将显示出一个loading背景图,判断在可视区的时候替换成...
前几天做的项目里有用...babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装 babel-plugin-import 插件 npm i babel-plugin-import -D // .babelrc 中配置 //