0

同じテンプレートを使用する 2 つのページがあります。唯一違うのは、それdata-role="content"が違うということです。私は使用して$.mobile.changePage('page2.php');いますがall.js、頭の中にあるファイルは、ロードされた要素にバインドされていませんpage2。

「all.js」のスクリプトタグは両方のページの先頭にあり、私が読んだものdata-role="page"から、2番目のページからロードされるだけです。.on()バインドは新しい要素にバインドする必要があるため、これは問題ありませんが、そうではありません。特に更新page2.phpするとall.jsファイルは機能しますが、使用すると機能changePageしません。

changePage新しい要素がバインディングからall.js .on()セレクターに取り込まれないのはなぜですか?

両方のページの HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">

    <title>Title</title>

    <link rel="stylesheet" href="css/themes/default/jquery.mobile.theme-1.2.0.min.css">
    <link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.2.0.min.css">

    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/pages/all.js"></script>
</head>

<body>
<div data-role="page" data-theme="d">
    <div data-id="head" data-role="header" data-position="fixed" data-theme="b">
        <h1>Name</h1>
        <a href="#" id="headingsActionButton" class="ui-btn-right headingsActionButton hidden" data-role="button" data-inline="true" data-icon="check">Save</a>

    </div>

    <div id="mainContent" data-role="content">
        {PageContent}
    </div>
    <div align="center" data-id="foot" data-role="footer" data-position="fixed" data-inset="false" data-theme="c">
        Powered by 
    </div>
</div>
</body>
</html>

all.js

$(function() {
    /**
     * Prevent the header and footer from hiding on a non element tap.
     */
    $("[data-role=header], [data-role=footer]").fixedtoolbar({ tapToggle: false });

    /**
     * Scroll to the top of the collapsible heading
     */
    $('.ui-collapsible-heading').on('click', function(e) {
        window.scrollTo(0, $(this).offset().top - $('[data-role=header]').height());
        $('.headingsActionButton').addClass('hidden');
        var attr = $(this).parent().attr('data-action-id');
        if (typeof attr !== 'undefined' && attr !== false) {
            if (!$(this).parent().hasClass('ui-collapsible-collapsed')) {
                console.log('expanded');
                $('.headingsActionButton').attr('data-action-id', $(this).parent().attr('data-action-id'));
                $('.headingsActionButton .ui-btn-text').text($(this).parent().attr('data-action-text'));
                $('.headingsActionButton').toggleClass('hidden');
            } else {
                console.log('collapsed');
            }
        }
    });


});
4

2 に答える 2

8

.onを置換する単純なドロップインではありません.live。正しい構文を使用する必要があります。

$(context).on(events,targetelements,eventhandler)

例えば、

$('#someparentelement').on('click','.ui-collapsible-heading',function(){...});

何をしていたのかを直接一致させるには、代わりに.live使用しますdocument'#someparentelement'

アップデート

問題の根本は、.ui-collapsible-heading のクリック イベントが JQM によって停止されていることです。つまり、ドキュメントにバブルアップできません。そのため、イベントを処理する唯一の方法は、委任なしでその要素に直接バインドすることです。

それを念頭に置いて、すべてのページで実行する必要があるため、最初のページでのみ実行されるため削除する必要があり$(function(){})、代わりに使用します$(document).on("pageinit",function(){})

于 2012-10-16T18:00:30.607 に答える
0

試す：

$('.ui-collapsible-heading').live('click', function(e) { ... });

「Live」は「on」のように機能しますが、イベントを新しい要素に設定します。

于 2012-10-16T18:08:18.163 に答える