悬浮效果在Safari中第二次无效

时间:2011-06-01 11:48:35

标签: javascript jquery html css safari

我遇到了一个奇怪的safari问题

我现在正在开发一个用Ajax加载其内容的网站我正在使用Hashchange方法和hashchange

来应用它

我正在获取网址,然后加载网页内容

    jQuery(window).bind('hashchange', function () {
    url = window.location.hash.substring(1);
    if (!url) {           
        return;
    }

        var tsTimeStamp= new Date().getTime();

        jQuery.get(url, { action: "get", time: tsTimeStamp,"ajaxed": "true"} , function (data, status, xmlHttp) {

            var container = jQuery("#hidden");
            container.html(xmlHttp.responseText);
            var content = jQuery(".inner", container).html();}

然后在加载内容后我正在应用一些jquery之类的东西,比如

                var ids = " ";
                var ids_2 = " ";
                for (var i = 0; i <= jQuery(".cats").length; i++) {
                    ids += "#c" + i + ",";
                    ids_2 += "#l" + i + ",";
                }

                ids = ids.substr(0, (ids.length) - 1);
                ids_2 = ids_2.substr(0, (ids_2.length) - 1);
                jQuery(ids).hover(function () {
                    href = jQuery(this).attr("href");
                    id = jQuery('a[href="' + href + '"]').attr("id");
                    jQuery("img").not(jQuery("img."+id)).addClass("op");

                }, function () {
                    time = setTimeout(remove, 200);

                });                                     

                jQuery(ids_2).hover(function () {

                    clearTimeout(time);
                    jQuery("img.op").removeClass("op");
                    href = jQuery(this).attr("href");
                    id = jQuery('a[href="' + href + '"]').attr("id");
                    jQuery("img").not(jQuery("img." + id)).addClass("op");

                }, function () {

                    jQuery("img.op").delay(200).removeClass("op");

                });
                function remove() {
                    jQuery("img.op").removeClass("op");
                }

以上代码将鼠标悬停在效果图像的地图区域上

(此代码适用于4页)。

以上所有代码都可以正常使用除Safari之外的所有浏览器

问题是当包含加载的地图的第一个页面加载代码工作正常但当你加载另一个页面包含相同的区域时,它将停止工作,直到整个页面被刷新。

似乎第一次缓存处理程序,然后不将它应用于新的选择器

请记住,当警报ids&amp; ids_2它给出正确的值,但在.hover中使用警报时,它不会在第二次触发。

我知道它很复杂,但实际上我坚持这个问题。

1 个答案:

答案 0 :(得分:0)

嗯,最好有小代码片段,但从我可以看到你在新创建的元素上绑定jQuery处理程序时遇到问题。要解决这个问题,你必须使用jQuery .live()。

来自jQuery文档:

  

这种方法是一种变体   附加的基本.bind()方法   元素的事件处理程序。什么时候   调用.bind(),即元素   jQuery对象指的是获取   处理程序;获得的元素   后来介绍没有,所以他们会   需要另一个.bind()调用。

     

.live()方法提供了一个   替代这种行为。绑定   目标元素的单击处理程序   使用这种方法:

$('.hoverme').live('hover', function(){
    // Live handler called.
});
  

然后添加一个新元素:

$('body').append('<div class="hoverme">Another target</div>');
  

然后点击新元素   也会触发处理程序。