Мобильная навигация jQuery скрывает события «click» на карте изображений HTML

Question

Я использую jQuery mobile для навигации, включая кнопки "назад", поэтому установлено следующее:

$.mobile.page.prototype.options.addBackBtn = true;

Чтобы использовать мобильную навигацию jQuery для перехода на страницы, связанные с картой изображений HTML, я использовал следующий код, привязанный к pagecreate:

$(page).find('MAP').bind('click', function(e) {
    alert("Map click");
 });

$(page).find('AREA').bind('click', function(e) {
    alert("Area click");
    e.preventDefault();
    $.mobile.changePage($(this).attr('href'));
 });

Кажется, что происходит в первый раз, когда моя карта изображений загружается, все работает, как ожидалось, и когда я касаюсь одной из областей, я получаю оба предупреждения, сначала "Клик по области", затем "Клик по карте", а затем приятно Анимация мобильной навигации jQuery ведет меня туда, куда я иду.

Однако, независимо от того, использую ли я кнопку возврата jQuery для мобильных устройств (активированную с помощью опции addBackBtn выше) или кнопку назад браузера, чтобы вернуться к карте изображений, эти события больше не возникают. Объекты области не вызывают их первоначальное поведение перед переопределением, действующее как обычная гиперссылка, и при этом я не получаю никаких моих предупреждений.

Это в браузерах Webkit на нескольких телефонах с iOS и Android - так или иначе браузеры настольных компьютеров не демонстрируют эту проблему.

Кто-нибудь знает ошибку / исправление / обходной путь для того, чтобы моя карта HTML-изображения продолжала работать, даже после того, как она была перемещена назад и обратно с помощью jQuery mobile? Вся помощь очень ценится.

Answer 1

Проблема заключается в том, что, когда вы используете jQuery mobile для навигации, иногда может случиться, что в DOM будут введены повторяющиеся идентификаторы, поэтому они советуют вам вообще никогда не использовать идентификаторы.

К сожалению, изображения должны ссылаться на свои карты по идентификатору (или имени), поэтому, используя описанный выше подход, вы можете в итоге манипулировать одной картой, в то время как ваш тег img указывает на другую с тем же идентификатором, который где-то находитсяеще в DOM.

Исправление не очень приятное, но оно заключается в установке идентификатора карты в нечто уникальное, а затем в атрибут usemap соответствующего изображения, прежде чем пытаться обновить обработчики каждого из них.область карты.