fancybox 无效 失效 直接打开页面, ajax 之后 fancybox对更新的数据无效,Jquery失效 无效

案例:做个聊天室项目,数据都是通过ajax刷新出来的,而对新数据绑定的fancybox均无效,点击直接打开到了新页面而不是弹窗,解决方法其实很简单

 

简单分析：ajax加载内容是在$(document).ready()之后的操作，这个时候给绑定函数的时候，找到的元素集合中还不包括ajax加载的内容，所以原来的没有问题，Ajax后加载的就没有绑定

 

详细分析：我们的   fancybox 使用的时候要写在 jquery的  $(document).ready(function () {})里面，也就是在文档加载完之后，就绑定给了 fancybox  ，但是我们ajax之后出来的数据，已经是在这个文档绑定之后出现的，所以现在你点击是没有用的，因为没有绑定到时间，那么解决方法呢？就是重新绑定一遍写在ajax的success成功之后的里面

 

例如，我这里有个ajax，在成功之后会执行一段代码，在代码的最后一段，我们再重新绑定 fancybox 即可

(也就是页面里面，在$(document).ready(function () {})里面有一个 fancybox的绑定给原来的页面使用，而新的ajax出来的数据，就写在ajax的success成功之后的里面即可，这个时候就不用再写 $(document).ready(function () {}) 了)

 

$("a.showpic").fancybox({
                width: 602,
                height: 421,
                autoScale: false,
                transitionIn: 'none',
                transitionOut: 'none',
                type: 'iframe',
                padding: 0,
                margin: 0,
                hideOnOverlayClick: false,  /*如果不希望点击遮罩层或者是窗口其他的地方就能关闭, 那么这里就设置为false*/
                showCloseButton: false   /*设置右上角的关闭按钮为关闭状态*/

            });

把上面的重新绑定事件, 放到下面的图里面的ajax里面的 success里面，就相当于是重新绑定了新出来的.showpic这个类的fancybox事件了

如果是fanxybox是在 UpdatePanel失效呢？参看 http://blog.csdn.net/eiwing/article/details/7090536

如果是 用jquery.fancybox时出现TypeError: loading is undefined 错误：参看http://egomu.com/development/40/

$("#fancybox-tmp").empty();//清除id等于fancybox-tmp下面的子元素
$("#fancybox-loading").empty();//清除id等于fancybox-loading下面的子元素
$("#fancybox-overlay").empty();//清除id等于fancybox-overlay下面的子元素
$("#fancybox-wrap").empty();//清除id等于fancybox-wrap下面的子元素
$("#fancybox-tmp").remove();//删除id等于fancybox-tmp元素
$("#fancybox-loading").remove();//删除id等于fancybox-loading元素
$("#fancybox-overlay").remove();//删除id等于fancybox-overlay元素
$("#fancybox-wrap").remove();//删除id等于fancybox-wrap元素

 

据说还有一种叫做 live方法 的方法，我没有用过，可以参考 jquery的 api 搜索

也可以看看这里

<script type="text/javascript"> 
<!-- 
jQuery(document).ready(function(){ 
jQuery(".brand li img").live('click',function(){ 

jQuery(this).parents("li").find("ul").slideToggle(); 
}); 
}); 
--> 
</script>