JQueryMobile addEventListener вызывает TypeError: undefined - все еще выполняется - PullRequest
1 голос
/ 11 марта 2012

Я использую очень стандартную "одностраничную" модель для разработки 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-масштабирование нравится центрировать масштабированный элемент, а не выравнивать по верхнему / левому углу.

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

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

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

Сумасшедшая вещь - doSomething () DOES увольняют, но затем Safari выдает следующую ошибку и выдает JQuery:

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

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

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

Ответы [ 2 ]

0 голосов
/ 29 марта 2012

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

0 голосов
/ 12 марта 2012

Есть две возможные проблемы. Второй параметр 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.

...