jQuery移動按鈕在角落單擊不起作用

Question

我使用cordova和jQuery mobile作為UI框架創建了一個移動應用程序。 它工作正常，除了在單擊角落時不觸發jQuery移動按鈕上的click事件。 在角落處單擊時，我會看到一個懸停效果（按鈕顏色更改），但未觸發click事件。 當從按鈕角向內一點單擊時，將觸發Click事件。

我正在使用jQuery mobile 1.4.2。 下面是我的按鈕（帶有showOptions和ui-btn類的錨標記）標記和單擊處理程序：

<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
    <img src="images/logo_small.png" class="appLogoImg dontDisplay ui-btn-left" style="margin-top: 6px;" />
    <h1 class="ui-title">All Packages</h1>
    <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
        <a href="#" class="showOptions ui-btn ui-icon-bars ui-btn-icon-left ui-nodisc-icon">Options</a>
    </div>
</div>


$('.showOptions').on('click', function() {
    console.log('button clicked');
    return false;
});

外面有人也面臨同樣的問題嗎？ 請幫我。

Answer 1

代替使用<button>或<input type="submit"> ，最好將<a> （像您一樣）與data-role="button"屬性一起使用。

<a href="#" data-role="button" class="showOptions ui-btn ui-icon-bars ui-btn-icon-left ui-nodisc-icon">Options</a>

具有data-role=button錨點不會被.ui-btn div包裹。 因此，您將擁有整個按鈕對任何事件的響應。