4

私は簡単なものを持っています。クリックイベントをアンカーIDに直接添付できないのはなぜですか？私もJQueryMobileを使用していることを指摘しておく必要があります。

            <div id="foobarNavbar" data-role="navbar" style="display:none;">
                <ul>
                    <li><a id="foo" href="#foo" data-icon="plus">New Event</a></li>
                    <li><a id="bar" href="#bar" data-icon="grid">Events</a></li>
                </ul>
            </div><!-- /foobarNavbar-->

クリックイベントをfooにアタッチしようとしています。これは機能しません：

        $('#foo').bind('click', function(e) 
        {   
            e.preventDefault();
            console.log("You clicked foo! good work");
        });

これは機能しますが、fooとbarの両方のクリックイベントが発生します。アンカーIDにバインドすることはできませんか、それともルーキーエラーを起こしますか？

        $('#foobarNavbar ul li a').bind('click', function(e) 
        {   
            e.preventDefault();
            console.log("You clicked foo! good work");
            console.log(e);
        });
4

3 に答える 3

2

そのコードをドキュメントにラップしますready。他のスクリプトエラーがなく、jQueryがロードされている場合に機能するはずです。

$(function(){
   $('#foo').click(function(e) 
   {   
      e.preventDefault();
      console.log("You clicked foo! good work");
   });
});
于 2012-06-27T13:49:24.030 に答える
1

重要：$（document）.ready（）ではなく、$（document）.bind（'pageinit'）を使用してください

jQueryで最初に学ぶことは、$（document）.ready（）関数内のコードを呼び出して、DOMがロードされるとすぐにすべてが実行されるようにすることです。ただし、jQuery Mobileでは、ナビゲート時に各ページのコンテンツをDOMにロードするためにAjaxが使用され、DOMレディハンドラーは最初のページに対してのみ実行されます。新しいページがロードおよび作成されるたびにコードを実行するには、pageinitイベントにバインドできます。このイベントについては、このページの下部で詳しく説明しています。

pageinitの代わりにdocumentreadyを使用してバインドしようとしました。最初の機能

$('#foo').bind('click', function(e) 
        {   
            e.preventDefault();
            console.log("You clicked foo! good work");
        });

'pageinit'イベントに移動すると正常に動作します。ただし、2番目のコード例が機能したのに、最初のコード例が機能しなかった理由はまだわかりません。

于 2012-06-27T14:01:01.080 に答える
1

そのようにそれは私が推測するように動作します...

$('#foobarNavbar').on('click','#foo', function(e) {   
   e.preventDefault();
   e.stopPropagation();
   console.log("You clicked foo! good work");
   console.log(e);
});
于 2012-06-27T13:54:04.263 に答える