0

JqueryMobileは初めてです。ボタンの単純なクリックイベントを試したかったのですが、機能しません（Firefoxで使用しています）

HTMLは

<!DOCTYPE html>
<html dir='ltr'>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="/css/style.css"/>
<script src='js/jquery.mobile.js'></script>
<script src='js/script.js'></script>
</head>
<body> 
    <div data-role="page" id='mypage'>  
        <button id='load_ajax'>Carica</button>
        <br />
        <div id='content'></div>
    </div><!-- /content -->
</body>
</html>

そしてscript.jsのスクリプトは

$('#mypage').delegate('#load_ajax','click',function (e) {
    alert('test'); 
});

デバッガーを使用しても、アラートはポップアップしません。

4

1 に答える 1

2

問題は、コードが.delegate（）を呼び出したときに、選択した要素がページに存在しないことだと思います。さらに、JSファイルが正しくロードされていることを確認してください。

投稿したコードを含む以下のコードは正しく機能します。

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    </head> 
    <body>
        <!-- /page -->
        <div data-role="page" id='mypage'>  
            <div id='content'>
                <button id='load_ajax'>Carica</button>
            </div>
        </div>
        <script type="text/javascript">
            $('#mypage').delegate('#load_ajax','click', function (e) {
                alert('test'); 
            });
        </script>
    </body>
</html>

さらに、jQuery APIで述べられているように：

jQuery 1.7以降、.delegate（）は.on（）メソッドに置き換えられました。ただし、以前のバージョンでは、イベント委任を使用するための最も効果的な手段であり続けます。

イベントハンドラーは、現在選択されている要素にのみバインドされており、コードが.on（）を呼び出すときにページに存在している必要があります。要素が存在し、選択できることを確認するには、ページのHTMLマークアップにある要素のドキュメントレディハンドラー内でイベントバインディングを実行します。新しいHTMLがページに挿入されている場合は、要素を選択し、新しいHTMLがページに配置された後にイベントハンドラーをアタッチします。または、委任されたイベントを使用して、イベントハンドラーをアタッチします。

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベントハンドラーがアタッチされたときに存在することが保証されている要素を選択することにより、委任されたイベントを使用して、イベントハンドラーを頻繁にアタッチおよび削除する必要をなくすことができます。この要素は、たとえば、Model-View-Controllerデザインのビューのコンテナー要素、またはイベントハンドラーがドキュメント内のすべてのバブリングイベントを監視する場合はドキュメントにすることができます。document要素は、他のHTMLをロードする前にドキュメントの先頭で使用できるため、ドキュメントの準備が整うのを待たずに、そこにイベントを添付しても安全です。

上記を読んだら、コードを次のように変更することを検討してください。

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).on('click', '#load_ajax', function(e){
                // your code
                alert($(this).text());
            });
        </script>
    </head> 
    <body>
        <!-- /page -->
        <div data-role="page" id='mypage'>  
            <div id='content'>
                <button id='load_ajax'>Carica</button>
            </div>
        </div>
    </body>
</html>
于 2012-11-19T19:07:50.233 に答える