web-dev-qa-db-ja.com

jQueryMobileは、ページを変更する代わりにクリックイベントをボタンに追加します

<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>

OnClick（）が設定されたjQMボタンである上記のコードを使用しています。 onclickが呼び出され、doSomething（）が実行されますが、その後、jQMは「ページの読み込みエラー」メッセージを表示します。

エラーを抑制するにはどうすればよいですか？この場合、jQMボタンが必要ですが、ページを変更したくありません。

ありがとう

javascriptjqueryjquery-mobile
28
RandomCoder

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を返すと、デフォルトのアクションが停止します。

44
Mark Coleman

あなたの問題は、ボタンに複数のアクションがあり、アンカータグを使用していることだと思います。ボタンをクリックすると、ページを呼び出して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');
});

ライブの例： http://jsfiddle.net/vRr82/2/

6
Phill Pafford

追加する必要があると思うdata-ajax="false"アンカータグ内.. jQuery mobileではページ遷移はAJAXによって行われ、ページ遷移の場合はfalseである必要があります。

0
Manish Agrawal