странная проблема с jQuery + Chrome

Question

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

var adjustTo = $(this).attr('data-adjust-width-to'),
    totalWidth = $(this).parent().width(),
    targetWidth = $(this).parent().find(adjustTo).width(),
    newWidth = totalWidth - targetWidth;

$(this).width(newWidth);

Это прекрасно работает в Firefox, Safari и даже IE7. Однако, когда я использую его в Chrome, он утверждает, что targetWidth равен 0, хотя это не так, когда я использую консоль для проверки вызываемого элемента.

Мне удалось это исправить ... поместив все это в setTimeout с задержкой 0 ...

Я думаю, что это как-то связано с тем, что рендеринг не выполняется, но так как код помещен в функцию document.ready () ... это не должно быть так, верно?

Кто знает, в чем причина этой проблемы?

Answer 1

Как насчет:

var adjustTo = $(this).attr('data-adjust-width-to'),
    totalWidth = $(this).parent().width(),
    targetWidth = $(this).parent().find('#' + adjustTo).width(),
    newWidth = totalWidth - targetWidth;

$(this).width(newWidth);

Полагаю, adjustTo - это идентификатор, указывающий на некоторый элемент.Хотя IE на самом деле не заботится о # s, WebKit (Chrome) действительно заботится.

Answer 2

Это не обычно, но попробуйте разделить var звонки:

var adjustTo = $(this).attr('data-adjust-width-to');
var totalWidth = $(this).parent().width();
var targetWidth = $(this).parent().find(adjustTo).width();
var newWidth = totalWidth - targetWidth;

$(this).width(newWidth);