2

My question is pretty much exactly like in jQuery code doesn't work if I'm using a local jquery.js file, why?.

However, the solution given there, doesn't work for me.

I created a file with UTF-8 encoding, but it will still not render correctly.

Using the external jQuery files work though.

Here is my MWE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" rel="stylesheet">
    <link href="http://code.jquery.com/mobile/1.2.0/css/jquery.mobile.structure-1.2.0.min.css" rel="stylesheet">
    <script charset="utf-8" src="js/cordova-2.2.0.js" type="text/javascript"></script>
    <script charset="utf-8" src="js/index.js" type="text/javascript"></script>
    <script charset="utf-8" src="js/jquery-1.9.0.min.js" type=
    "text/javascript"></script>
    <script charset="utf-8" src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('div.ui-page').live("swipeleft", function() {
                var nextpage = $(this).next('div[data-role="page"]');
                if (nextpage.length > 0) {
                    $.mobile.changePage(nextpage, {
                        transition: "slide",
                        reverse: false
                    });
                }
             });
             $('div.ui-page').live("swiperight", function() {
                 var prevpage = $(this).prev('div[data-role="page"]');
                 if (prevpage.length > 0) {
                     $.mobile.changePage(prevpage, {
                         transition: "slide",
                         reverse: true
                     });
                 }
             });
         });       
    </script>
</head>

<body>
    <div data-role="page">
        <div data-role="header">
            <h2 class="ui-title"><strong>Page one</strong></h2>
        </div>

        <div data-role="content">
            <strong>You are in page one.</strong>
        </div>

        <div data-id="foo1" data-position="fixed" data-role="footer">
            <div data-role="navbar">
                <ul>
                    <li><strong><a data-icon="home" href=
                    "index.html">Home</a></strong></li>

                    <li><strong><a data-icon="info" href=
                    "b.html">Info</a></strong></li>

                    <li><strong><a data-icon="gear" href=
                    "#">Settings</a></strong></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->
    </div>

    <div data-role="page">
        <div data-role="header">
            <h2 class="ui-title"><strong>Page two</strong></h2>
        </div>

        <div data-role="content">
            <strong>You are in page two.</strong>
        </div>

        <div data-id="foo1" data-position="fixed" data-role="footer">
            <div data-role="navbar">
                <ul>
                    <li><strong><a data-icon="home" href=
                    "index.html">Home</a></strong></li>

                    <li><strong><a data-icon="info" href=
                    "b.html">Info</a></strong></li>

                    <li><strong><a data-icon="gear" href=
                    "#">Settings</a></strong></li>
                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->
    </div>
</body>
</html>
4

2 に答える 2

4

最初に jQuery にリンクする必要があります。他のすべてのスクリプト ファイルの上。したがって、両方の jQuery ファイルをあなたのファイルcordovaとindex.js ファイルの上に移動するだけです。jQueryテクニックが含まれcordovaてindexいない場合を除きます。

なんで？ブラウザが解釈する前に jQuery を使用することはできません。

于 2013-02-01T23:02:26.917 に答える
3

.livev1.7 から jQuery で廃止され、v1.9 で削除されました。

に置き換える必要があり.on()ます。

.onバインディング要素には 2 つの構文がありますが、.live1 つしかありませんでした。

バインド時に要素が存在する場合は、次のようにします。

$('.element').on('click', function(){
  ...
});

省略形を使用することもできます:

$('.element').click(function(){
  ...
});

要素がその時点で存在しない場合、または新しい要素が追加される場合 (これは.live通常使用されていたものです)、「イベント委任」を使用する必要があります。

$(document).on('click', '.element', function(){
  ...
});

注: 常にではなく、最も近い静的要素にバインドする必要がありますdocument。

于 2013-02-01T23:03:03.737 に答える