1

私は自分のウェブサイトに jquery mobile を使用しています。ページが初めて読み込まれる場合は、正常に動作します。ページが ajax (トランジションあり) を介して読み込まれると、機能しません。pageinit イベントを試してみましたが、成功しませんでした。

これは、すべてのページに含まれるフッター スクリプトです。

  <a href="javascript:void(0);" id="expand-footer" class="expand-button" data-role="none"></a>
    <div class="footer-content"> Footer </div>

    $(document).ready(function() {
       $('#expand-footer').unbind("click").click(function(e) {
        e.preventDefault();
        console.log("click");
        $('#expand-footer').toggleClass('expand-button-close', 'expand-button');

        if ($('#expand-footer').hasClass('expand-button expand-button-close')) {
            console.log("if click");
            $('.footer-content').hide("slide", { direction: "down" }, 1000);
        } else {
            console.log("else click");
            $('.footer-content').show("slide", { direction: "down" }, 1000);
        }

    });
   });

ここで何が問題になる可能性がありますか？

4

1 に答える 1

0

聞くべきではないと思いますunbind。当然、clickイベントをリッスンします。

$('#expand-footer').click(function (e) {
    e.preventDefault();
    console.log("click");
    $('#expand-footer').toggleClass('expand-button-close', 'expand-button');

    if ($('#expand-footer').hasClass('expand-button expand-button-close')) {
        console.log("if click");
        $('.footer-content').hide("slide", { direction: "down" }, 1000);
    } else {
        console.log("else click");
        $('.footer-content').show("slide", { direction: "down" }, 1000);
    }
});

モバイル サイトをデバイスで使用する場合は、デバイスの準備ができたときにイベント リスナーを追加する必要がdocument.addEventListener("deviceready", onDeviceReady, false);あります。このコードを常に使用する必要がある場合は、デバイスの準備ができたときに実行します。

function onDeviceReady(){
    $('#expand-footer').click(function (e) {
        e.preventDefault();
        console.log("click");
        $('#expand-footer').toggleClass('expand-button-close', 'expand-button');

        if ($('#expand-footer').hasClass('expand-button expand-button-close')) {
            console.log("if click");
            $('.footer-content').hide("slide", { direction: "down" }, 1000);
        } else {
            console.log("else click");
            $('.footer-content').show("slide", { direction: "down" }, 1000);
        }
    });  
}

ただし、ユーザーが特定のページに移動したときにのみコードを実行する必要がある場合は、次のいずれかの方法を使用できます。

  • ページショー
  • ページ作成
  • pageinit

詳細なドキュメントはこちらにあります: http://jquerymobile.com/test/docs/api/events.html

構文は次のようになります。

$(document).on('pageinit', '#your_page_id', function(){
    $('#expand-footer').click(function (e) {
        e.preventDefault();
        console.log("click");
        $('#expand-footer').toggleClass('expand-button-close', 'expand-button');

        if ($('#expand-footer').hasClass('expand-button expand-button-close')) {
            console.log("if click");
            $('.footer-content').hide("slide", { direction: "down" }, 1000);
        } else {
            console.log("else click");
            $('.footer-content').show("slide", { direction: "down" }, 1000);
        }
    });   
});

他のイベントを使用するには:

$(document).on('pagecreate', '#your_page_id', function(){
    //your code here
});

$(document).on('pageshow', '#your_page_id', function(){
    //your code here
});

.liveも動作しますが、まもなく非推奨になります:

$('#your_page_id').live("pagecreate", function(){
     //your code here
});

JavaScript を使用して ID を動的に追加するには:

$(document).append('<div data-role="page" id="your_page_id"><div data-role="content">dummy text</div></div>'); $('#my_page_id').page();

または、PHP ファイルで:

<?php
    echo "<div data-role=\"page\" id=\"your_page_id ";
    //use single quote ' to avoid escaping double quote in string
    echo " \"></div>";
?>

特定の ID を避けるには: または、以下を使用して任意のページに jQuery を適用できます。

$(document).on('pagecreate','[data-role=page]', function(){
    //code here
});


$(document).on('pageinit','[data-role=page]', function(){
    //code here
});


$(document).on('pageshow','[data-role=page]', function(){
    //code here
});
于 2012-12-20T09:50:01.067 に答える