1

androidのjquerymobile/phonegapで左/右スワイプを実現しようとしています。サンプルコードがありますが、スワイプしても何も起こりません。

これが私のJavaScriptコードです

$("#listitem").swiperight(function() {
    $.mobile.changePage("#page1");
});

これが本文の内容です

<div data-role="page" id="home">
    <div data-role="content">
        <p>
        <ul data-role="listview" data-inset="true" data-theme="c">
            <li id="listitem">Swipe Right to view Page 1</li>
        </ul>
        </p>
    </div>
</div>

<div data-role="page" id="page1">
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c">
            <li data-role="list-divider">Navigation</li>
            <li><a href="#home">Back to the Home Page</a></li>
        </ul>

        <p>
            Yeah!<br />You Swiped Right to view Page 1
        </p>
    </div>
</div>

4

1 に答える 1

2

イベントハンドラーは現在選択されている要素にのみバインドされており、コードが呼び出しを行うときにページに存在している必要があります。document要素は、他のHTMLをロードする前にドキュメントの先頭で使用できるため、ドキュメントの準備が整うのを待たずに、そこにイベントを添付しても安全です。

さらに、jQMドキュメントで説明されているように、live（）またはbind（）を使用して、他のjQueryイベントと同じようにこれらのイベントにバインドできます。

次の例を確認できます。

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Swipe</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script>
            $('#listitem').live("swiperight", function(){
                $.mobile.changePage("#page1");
            });
        </script>
    </head> 
    <body>
        <div data-role="page" id="home">
            <div data-role="content">
                <p>
                    <ul data-role="listview" data-inset="true" data-theme="c">
                        <li id="listitem">Swipe Right to view Page 1</li>
                    </ul>
                </p>
            </div>
        </div>
        <div data-role="page" id="page1">
            <div data-role="content">
                <ul data-role="listview" data-inset="true" data-theme="c">
                    <li data-role="list-divider">Navigation</li>
                    <li><a href="#home">Back to the Home Page</a></li>
                </ul>
                <p>
                    Yeah!<br />You Swiped Right to view Page 1
                </p>
            </div>
        </div>
    </body>
</html>

例2：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Swipe Example</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script>
            $(document).on("swiperight", "#listitem", function() {
                $.mobile.changePage("#page1");
            });
        </script>
    </head> 
    <body>
        <div data-role="page" id="home">
            <div data-role="content">
                <p>
                    <ul data-role="listview" data-inset="true" data-theme="c">
                        <li id="listitem">Swipe Right to view Page 1</li>
                    </ul>
                </p>
            </div>
        </div>
        <div data-role="page" id="page1">
            <div data-role="content">
                <ul data-role="listview" data-inset="true" data-theme="c">
                    <li data-role="list-divider">Navigation</li>
                    <li><a href="#home">Back to the Home Page</a></li>
                </ul>
                <p>
                    Yeah!<br />You Swiped Right to view Page 1
                </p>
            </div>
        </div>
    </body>
</html>

例3：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Swipe Example</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    </head> 
    <body>
        <div data-role="page" id="home">
            <div data-role="content">
                <p>
                    <ul data-role="listview" data-inset="true" data-theme="c">
                        <li id="listitem">Swipe Right to view Page 1</li>
                    </ul>
                </p>
            </div>
        </div>
        <div data-role="page" id="page1">
            <div data-role="content">
                <ul data-role="listview" data-inset="true" data-theme="c">
                    <li data-role="list-divider">Navigation</li>
                    <li><a href="#home">Back to the Home Page</a></li>
                </ul>
                <p>
                    Yeah!<br />You Swiped Right to view Page 1
                </p>
            </div>
        </div>
        <script>
            $("#listitem").swiperight(function() {
                $.mobile.changePage("#page1");
            });
        </script>
    </body>
</html>
于 2013-01-01T15:14:16.950 に答える