JQueryMobile addEventListener, вызывающий TypeError: undefined, но все еще выполняющийся

Я использую очень стандартную одностраничную модель для разработки JQueryMobile, например:

<div id="page1" data-role="page">Lorem Ipsum</div>
<div id="page2" data-role="page">
    <div id="mycontent" data-role="content"></div>
</div>

Когда я щелкаю ссылку для перехода со страницы 1 на страницу 2, я добавляю содержимое в $("#mycontent"), которое содержит изображения, которые не всегда имеют указанную ширину/высоту, затем я применяю iScroll-4, чтобы я мог прокручивать/масштабировать контент - в некоторых случаях мне нужно увеличить его, как только он загружается, чтобы он хорошо помещался на экране мобильного устройства (обычно 600 пикселей в ширину для начала). Проблема в том, что после загрузки изображений форматирование разваливается, особенно потому, что мне нужно изменить положение элемента, поскольку масштабирование CSS любит центрировать увеличенный элемент, а не выравнивать по верхнему/левому углу.

Вероятно, это было длинное объяснение простой проблемы (может быть, есть лучший способ сделать то же самое?), но вот моя настоящая проблема: я пытаюсь добавить прослушиватель событий для события загрузки в div, чтобы Я могу проверить, нужно ли мне изменить положение div после загрузки всех изображений:

$("#mycontent").addEventListener('load', doSomething(), false);

function doSomething(){  alert("something");  }

Сумасшествие в том, что doSomething() ДЕЙСТВИТЕЛЬНО срабатывает, но затем Safari выдает следующую ошибку и аварийно завершает работу JQuery:

TypeError: 'undefined' не является функцией (оценка '$("#mycontent").addEventListener('load', doSomething(), false)')

Элемент присутствует в DOM, и он определенно загружается в момент добавления прослушивателя событий — и я думаю, это становится ясно из того факта, что он срабатывает. JQM применяет некоторые стили к элементу при переходе, но я не понимаю, как это повлияет на него.

Любая помощь будет оценена по достоинству, так как я некоторое время бился об это головой и собираюсь написать несколько очень уродливых циклических хаков для проверки изменений размера:/


jquery addeventlistener resize jquery-mobile iscroll4
person jstafford    schedule 10.03.2012    source источник
comment
Я должен добавить, что я вызываю код addEventListener в событии pagebeforeshow, но я также пробовал его в событии pagebeforeshow. Любое из более ранних событий в последовательности приводит к другой ошибке, и функция НЕ запускается. Я считаю, что ошибка возникла из-за того, что элемент еще не существует. Его надо временно убрать при переходе...?   -  person jstafford    schedule 11.03.2012

Ответы (2)


arrow_upward
0
arrow_downward

Возможны две проблемы. Второй параметр addEventListener должен быть функцией, а не вызовом функции: element.addEventListener("load", doSomething, false);. В вашем коде doSomething() выполняется независимо от имени события.

Кроме того, $('#mycontent') возвращает массив элементов, который, я думаю, вызывает ваш TypeError, поэтому вы можете использовать:

var mycontent = document.getElementById('mycontent');
mycontent.addEventListener("load", doSomething, false);

JQuery также имеет load(), который может работать, если вы прослушиваете событие загрузки каждого изображения и корректируете ваш макет:

$('#mycontent img').load(doSomething);

Это будет срабатывать один раз для каждого изображения, поэтому вы можете вести подсчет, если знаете количество изображений, или же создавать/сбрасывать тайм-аут при каждой загрузке, а после тайм-аута вызывать doSomething.

person Oiva Eskola    schedule 12.03.2012
comment
Спасибо, Ойва, я попробую и отвечу утром. JQuery load() у меня не работал, но два других могут. Что касается последней части, я определенно могу получить количество тегов изображений, так что это может сработать. Я надеюсь, что привязать событие загрузки к более чем 50 изображениям на мобильном устройстве будет не слишком сложно. Я думаю, мы увидим! - person jstafford; 12.03.2012
comment
Когда я попытался изменить doSomething в качестве обратного вызова, он просто ничего не сделал. После некоторых исследований многие здесь, в стеке, говорят, что загрузка работает только с объектом окна и изображениями, где в лучшем случае схематична. Другими словами, никаких div. Я также прочитал сайт JQuery немного больше, и они говорят, что вызов нагрузки на изображение в лучшем случае рискован. Я отмечу это как ответ, так как это помогло мне понять, что $(#mycontent) возвращает массив, который вызывает ошибку, которая была частью моего вопроса. Обход ошибки привел меня к тому, что я увидел несвязанное решение, которое помогло мне обойти эту проблему. Спасибо! - person jstafford; 13.03.2012

arrow_upward
0
arrow_downward

Причина, по которой вы получаете сообщение об ошибке, заключается в том, что вы используете JQuery и пытаетесь добавить событие в обход API JQuery. Вы не должны использовать метод addEventListener. Вместо этого используйте $('#mycontent').load(handler), где обработчик — это функция, принимающая аргумент. например $('#mycontent').load(function (e) {alert ("loaded")})

person maxwoj    schedule 29.03.2012