1

Всем привет! Снова столкнулся со странной проблемой, теперь связанной с JavaScript. Есть страница, на ней простенький JavaScript, также подключён jQuery.

function initTooltips() {
$(window).load(function() {
    $('.tt-trigger').each(function() {
        var index = $(this).data('tooltip');
        var pPos = $(this).position();
        var pWidth = $(this).outerWidth();
        var pHeight = $(this).outerHeight();

        $('.tooltip.tt[data-tooltip="' + index + '"]').css({
        width: pWidth + 'px',
        top: (pPos.top + pHeight) + 'px',
        left: (pPos.left) + 'px' // pPos.left = 0, 150, 300 ..
        });
    });
});

$(window).resize(function() {
    $('.tt-trigger').each(function() {
        var index = $(this).data('tooltip');
        var pPos = $(this).position();
        var pWidth = $(this).outerWidth();
        var pHeight = $(this).outerHeight();

        $('.tooltip.tt[data-tooltip="' + index + '"]').css({
        width: pWidth + 'px',
        top: (pPos.top + pHeight) + 'px',
        left: (pPos.left) + 'px'
        });
    });
});
};

$(function() {
    initTooltips();
});

Итак, код перестаёт работать ($(this).position().left начинает на все итерации выдавать 0) в трёх ситуациях: если я выношу код из load и resize в отдельную функцию, если я выношу код за пределы $(window).load() (document не так уж и ready, видимо) или если я перехожу с этой страницы на какую-то другую, а затем возвращаюсь кнопкой браузера "Назад" (начинает работать после обновления страницы). Например, такой код уже не работает (но ошибок в консоль не выдаёт, просто все нужные переменные равны нулю):

function foo() {
    $('.tt-trigger').each(function() {
        var index = $(this).data('tooltip');
        var pPos = $(this).position();
        var pWidth = $(this).outerWidth();
        var pHeight = $(this).outerHeight();

        $('.tooltip.tt[data-tooltip="' + index + '"]').css({
        width: pWidth + 'px',
        top: (pPos.top + pHeight) + 'px',
        left: (pPos.left) + 'px' // pPos.left = 0, 0, 0 ..
        });
    });
};
function initTooltips() {
    $(window).load( foo() );
    $(window).resize( foo() );
};

$(function() {
    initTooltips();
});

То есть поведение очень странное, но я не вижу причин для этого. Заранее спасибо за помощь.

2
  • Вы показали код, который работает? Очень хорошо. Теперь покажите, пожалуйста, код, который не работает.
    – user176262
    19 мая 2016 в 13:52
  • Проблема с кнопкой "Назад" присутствует из-за того, что код на JavaScript отрабатывает до компиляции less (через less.js). Соответственно, при подключении заранее подготовленного CSS проблема исчезает, поэтому в продакшене её не будет. Впрочем, я всё равно не понимаю, почему Chrome так странно интерпретирует JavaScript при нажатии кнопки "Назад".
    – Urffly
    20 мая 2016 в 8:01

1 ответ 1

1

Ну вот, это другое дело.

Вы совершенно правильно поместили одинаковый повторяемый код в отдельную функцию. Но теперь Вам надо не вызывать Ваш обработчик, a передавать ссылку на него:

function initTooltips() {
    $(window).load( foo );
    $(window).resize( foo );
};

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.