Question

我的问题与jQuery code doesn't work if I'm using a local jquery.js file, why?非常相似。

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

我使用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>

Answer 1

您必须先链接到jQuery 。高于所有其他脚本文件。因此，只需将两个jQuery文件移到cordova和index .js文件上方即可。除非cordova和index不包含jQuery技术。

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

Answer 2

自v1.7以来，

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

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

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

如果绑定时元素存在，则按以下方式执行：

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

您甚至可以使用简写：

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

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

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

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

本地jQuery文件不起作用

2 个答案: