jQueryMobile добавить событие нажатия кнопки вместо изменения страницы

Question

<p><a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="a" onclick="doSomething(); return false">VERIFY</a></p>

Я использую приведенный выше код, представляющий собой кнопку jQM с установленным onClick (). Вызывается onclick, и выполняется doSomething (), но после этого jQM показывает сообщение об ошибке загрузки страницы.

Как я могу подавить ошибку? В этом случае я хочу кнопку jQM, но не хочу, чтобы она меняла страницу.

Спасибо

Answer 1

Поскольку вы используете jQuery, я бы рекомендовал использовать jQuery для подключения ваших событий.С учетом сказанного, использование e.preventDefault(); и e.stopImmediatePropagation(); должно помешать jQuery mobile выполнять действие по умолчанию на <a/>.

$("#verify").click(function (e) {
    e.stopImmediatePropagation();
    e.preventDefault();
    //Do important stuff....
});

Обновление

.лучший способ использовать существующую разметку - просто добавить rel="external" к вашему <a/>, и ваш onclick должен вести себя правильно.

<p>
  <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="a" onclick="doSomething(); return false" rel="external">VERIFY</a>
</p>

Это будет работать, поскольку jQuery Mobile будет обрабатывать ссылку какОбычный тег <a/> и возврат false просто остановят действие по умолчанию.

Answer 2

Я думаю, что ваша проблема в том, что вы выполняете несколько действий над кнопкой и используете тег привязки. При нажатии на кнопку вы вызываете страницу для перехода к index.html и событию onClick.

<a 
    href="index.html"                       <-- go to index.html
    data-role="button" 
    data-icon="arrow-r" 
    data-iconpos="right" 
    data-theme="a" 
    onclick="doSomething(); return false">  <-- Click event
VERIFY
</a>

Могу попробовать (возможно, потребуется удалить / добавить некоторые другие атрибуты)

<input
    type="button"
    name="verify"
    id="verify"
    data-icon="arrow-r" 
    data-iconpos="right" 
    data-theme="a" 
    value="VERIFY" />

и добавьте событие клика

$('#verify').click(function() {
    alert('Button has been clicked');
});

Live Пример: http://jsfiddle.net/vRr82/2/

Answer 3

Использование Jquery Live Function.Это очень полезно для меня

Answer 4

Я думаю, вы должны добавить data-ajax="false" внутри тега привязки .. потому что в jQuery mobile переход страницы осуществляется с помощью AJAX, а для перехода страницы это должно быть false ..