jquery (мобильный) - привязать событие касания к div

Question

Если у меня есть этот HTML:

<div id="myDiv"></div>

и этот CSS:

#myDiv{
    background:url('../images/someImage.png') no-repeat;
    background-size:100%;
    width:44px;
    height:44px;

}

Мне нужно открыть новую страницу, когда пользователь нажимает на myDiv. У меня есть внешний файл JS, где у меня есть это:

function bindMyDiv(){
    $("#myDiv").bind('tap',function(event, ui){
        alert("binding");
    })
}

Но я не понимаю, где это вызывать из HTML, или если это даже правильный способ сделать это. Совет

Answer 1

Попробуйте

$("#myDiv").live("tap", function(event){
  alert('binding');
});

Вы можете поместить это в сторону вашего onReady файла JavaScript

EDIT:

http://jsfiddle.net/R9e6u/

Answer 2

Все здесь предоставили довольно хорошее представление о различных решениях для вас, чтобы справиться с вашим сценарием, но я не думаю, что кто-то задумался, СЛЕДУЕТ ли они помочь улучшить ваш сценарий.«или если это даже правильный путь для этого», ответ - нет.И, возможно, я слишком упрощаю, но с JQM, если вы пытаетесь иметь div (или любой элемент DOM), откройте новую страницу, просто оберните вокруг нее тег привязки (или в нем, в зависимости от того, что уместно).) и установите для href значение href="#myNewPage", а для идентификатора на странице JQM, который вы хотите загрузить, - id="myNewPage"

. Работа с фреймами jQuery Mobile настроена так, чтобы автоматически внедрять JS & AJAX в обычные элементы HTML, чтобы обеспечитьгладкий UX.Хотя связывание события касания иногда необходимо, эта ситуация не гарантирует такой уровень кода ... в этом вся прелесть jQuery Mobile =).

Примеры того, когда связывать событие касания: показать / скрытьdom object, вызвать клик для плагина и т. д.

Answer 3

Вы хотите вызвать эту функцию в событии pageinit для страницы, на которой она находится. Вы можете использовать некоторые другие события страницы из jQuery Mobile, например: pagecreate, pageshow и т. Д., Но я думаю, что pageinit - ваш лучший выбор.

Реализация будет выглядеть примерно так:

$(document).delegate('#page-id', 'pageinit', function () {
    $("#myDiv").bind('tap',function(event, ui){
        alert("binding");
    })
});

OR

$(document).delegate('#page-id', 'pageinit', bindMyDiv);

Вы бы заменили #page-id идентификатором элемента data-role="page", в котором находится ваш div.

Этот метод предпочтительнее делегирования события для элемента #myDiv, так как привязка непосредственно к элементу создает меньше накладных расходов при запуске события. Если вы используете делегирование события, событие должно всплыть до корня делегирования.