8

jQuery jquery-1.9.1.js および jQueryMobile 1.3.1 (Chrome 26/Windows 7) を使用すると、#one1 にバインドされたこれらの「クリック」イベントの 1 つが発生し、もう 1 つが発生しない理由がわかりません。

HTML:

<div data-role="page" id="one" data-theme="a">
    <div data-role="header" data-position="inline">
        <h1>One</h1>
    </div>
    <div data-role="content" data-theme="a">
        <a href="#" id="one1">[one]</a>
        <a href="#two">two</a>
        <a href="#three">three</a>
    </div>
</div>

JavaScript:

<script>
$(document).on( "mobileinit", function() {
    $(document).on('click', '#one1', function(e){
        console.log('firing');
    });
    $('#one1').on("click", function() {
        console.log('not firing');
    });
}); 
</script>

JSFiddle で実行すると、「mobileinit」イベントにラップされていない場合に両方のイベントが発生します: http://jsfiddle.net/9NRwa/

ここで何が欠けていますか？

4

2 に答える 2

0

ドキュメントが述べたように：

mobileinit イベントはすぐにトリガーされるため、jQuery Mobile が読み込まれる前にイベント ハンドラーをバインドする必要があります。

現在、mobileinitjQuery Mobile がロードされた後にイベントが実行されていjsFiddleます。これは、サイドバーから選択したライブラリのロードが完了した後に JavaScript コードが実行されるためです。機能させるには、構造は次のようになります。

<script src="jQuery library include first"></script>
<script>
    $(document).on("mobileinit", function() {
        // Your code here
    });
</script>
<script src="jQuery Mobile include last"></script>
于 2013-05-04T15:57:55.610 に答える