2

如果我使用本地 jquery.js 文件，我的问题非常类似于jQuery 代码不起作用，为什么？.

但是，那里给出的解决方案对我不起作用。

我创建了一个带有UTF-8编码的文件，但它仍然无法正确呈现。

使用外部jQuery文件虽然有效。

这是我的 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 文件上方即可。除非cordova并且index不包含 jQuery 技术。

为什么？在浏览器解释它之前，你不能使用 jQuery。

于 2013-02-01T23:02:26.917 回答
3

.live自 v1.7 起已在 jQuery 中弃用，并已在 v1.9 中删除。

您应该将其替换为.on().

.on有 2 种用于绑定元素的语法，而.live只有 1 种。

如果元素在您绑定时存在，您可以这样做：

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

您甚至可以使用速记：

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

如果该元素当时不存在，或者将添加新元素（这是.live通常使用的），则需要使用“事件委托”：

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

注意：您希望绑定到最近的静态元素，而不是总是document.

于 2013-02-01T23:03:03.737 回答