Home/ Questions/Q 9229249
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T05:31:30+00:00

My question is pretty much exactly like in jQuery code doesn't work if I'm

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    .live has been deprecated in jQuery since v1.7, and has been removed in v1.9.

    You should replace it with .on().

    .on has 2 syntaxes for binding elements, whereas .live only had 1.

    If the element exists at the time you are binding, you do it like this:

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

    You can even use the shorthand:

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

    If the element does not exist at the time, or new ones will be added (which is what .live was normally used for), you need to use “event delegation”:

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

    NOTE: You want to bind to the closest static element, not always document.

    • 0