Свойство видимости CSS не работает в браузерах Webkit после успешного вызова jQuery ajax - PullRequest
Новая
       40

Свойство видимости CSS не работает в браузерах Webkit после успешного вызова jQuery ajax

1 голос
/ 31 марта 2010

Проблема:
Я делаю jQuery .ajax вызовы, нажимая на некоторые изображения курсора, чтобы перемещаться по каталогу книг, заменяя содержимое div на ответ ajax (обычный html). Существует изображение курсора, которое показывает только, если в книге более 1 рисунка, и управляется php-кодом, который напрямую отображает HTML, указанный в обратном вызове ajax.

В FF и IE> 7 скрипт работает правильно. Но в браузерах Webkit обратный вызов ajax хорошо сделан, но он отображает CSS неправильно. Кажется, что изображение правильного курсора кэшируется после того, как оно показывается в первый раз, даже если книга не имеет никаких дополнительных изображений. Самое интересное, что изображение правого курсора отображается, но функциональность JS не работает (как и должно быть, потому что нет лишнего изображения), а также потому, что при навигации с помощью инструментов разработчика, открытых в Chrome, CSS отрисовывается нормально, как и должно быть , как в FF и IE7.

Это может быть проблема неправильного использования $ (document) .ready?

Это код JS, вставленный как внешний файл .js: 

function goBook(val, dir, lang){
    var direction = '';
    var inverse = '';
    if(dir == 'down'){
         direction = '+';
         inverse = '-';
    }else{
         direction = '-';
         inverse = '+';
    }
    $(document).ready(function(){
         $("div.itemlateral").animate({'top': inverse+"500px"});
         $.ajax({
             url: "projects",
             type: "POST",
             data: { book: val, pic: 0, language: lang },
             dataType: "json",
             success: function(data){
                 $("div.inner-content").html(data.projects);
                 $("div.itemlateral").css({'top': direction+"1000px"});
                 $("div.itemlateral").animate({'top': "0px"});
                 }
             });
         });
     }
}

function nextImg(val, val2, dir, lang){
    var direction = '';
    var inverse = '';
    if(dir == 'right'){
        direction = '+';
        inverse = '-';
    }else{
        direction = '-';
        inverse = '+';
    }
    $(document).ready(function(){
        $("div.node-image").animate({'left': inverse+"500px"});
        $.ajax({
            url: "projects",
            type: "POST",
            data: { book: val, pic: val2, language: lang },
            dataType: "json",
            success: function(data){
                         $("div.inner-content").html(data.projects);
                         $("div.node-image").css({'left': direction+"1000px"});
                         $("div.node-image").animate({'left': "0px"});
                      }
            });
     });
}

1 Ответ

3 голосов
/ 31 марта 2010

После некоторого тестирования я бы сказал, что это не связано с javascript, а скорее является неясной поведенческой ошибкой перерисовки в webkit.

Причина, по которой я это говорю, заключается в том, что стрелка исчезает, как только вы заставляете документ перерисовывать (нажмите ctrl + a или измените размер окна, или как вы говорите в режиме разработки, где документ перерисовывается автоматически).

Я провел некоторое тестирование и заменил visibility: hidden; на display: none; в вашем .disabled [style.css] классе, кажется, чтобы решить проблему.

...