Эффект наведения не работает со второго раза в Safari

Question

У меня странная проблема с сафари

Сейчас я занимаюсь разработкой веб-сайта, который загружает его содержимое с помощью Ajax. Я применяю это с использованием методологии Hashchange и, когда используется hashchange

Я получаю 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 он не срабатывает во второй раз.

Я знаю, что это сложно, но на самом деле я застрял с этой проблемой.

Answer 1

Хорошо, было бы лучше иметь небольшие фрагменты кода, но из того, что я вижу, у вас проблемы с привязкой обработчиков jQuery к вновь созданным элементам. Чтобы решить эту проблему, вы должны использовать jQuery .live ().

Из документации jQuery:

Этот метод является разновидностью базовый метод .bind () для прикрепления обработчики событий для элементов. когда .bind () называется, элементы, которые объект jQuery ссылается на обработчик прилагается; элементы, которые получают введено позже нет, поэтому они будут требуется еще один вызов .bind ().

Метод .live () обеспечивает альтернатива этому поведению. Связывать обработчик кликов для целевого элемента используя этот метод:

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

А потом добавить новый элемент:

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

Тогда клики по новому элементу будут также вызвать обработчик.