悬停效果在 Safari 中第二次不起作用

Question

我在 Safari 中遇到了一个奇怪的问题

我现在正在开发一个使用 Ajax 加载其内容的网站

我正在获取 url，然后加载页面的内容

    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 之外的所有浏览器上都可以正常工作

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

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

请记住，当 Alert ids & ids_2 提供正确的值时，但在 .hover 中使用 alert 时，它不会在第二次触发。

我知道这很复杂，但我真的被这个问题困住了。

Answer 1

好吧，最好使用小代码 sn-ps，但据我所知，您在将 jQuery 处理程序绑定到新创建的元素时遇到了问题。要解决这个问题，你必须使用 jQuery .live()。

来自 jQuery 文档：

此方法是 用于附加的基本 .bind() 方法 元素的事件处理程序。什么时候 .bind() 被调用，元素 jQuery对象是指获取 附加处理程序；得到的元素 后来介绍的不要，所以他们会 需要另一个 .bind() 调用。

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

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

然后再添加一个新元素：

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

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