2

私はASP.NETMVC3 +JQueryMobileアプリケーションを次のようなレイアウト構造で使用しています。

<body>
    <div class="page" data-role="page" data-add-back-btn="true" id="page">
        <div data-role="header" data-position="fixed"></div>
        <div data-role="content" id="content">
            @RenderBody()
        </div>
        <div id="footer" data-role="footer" data-position="fixed"></div>
    </div>
</body>

問題は、ウィンドウにバインドされたイベントハンドラーが数ページスタックすることです。

たとえば、2つのページがあります:"Index""About"。私は"Index"いくつかのハンドラーをバインドします(たとえばconsole.log("index"))$(window).click()イベントについて。しかし、"About"ページに移動すると、このハンドラーはまだアクティブです。

適切なページがアクティブな間だけハンドラーを保持する方法はありますか?

4

2 に答える 2

1

jQM でこの種のイベント バインディングを使用します。

$('#page').bind('click', function(e) {

});

新しいバージョンの jQuery では、.on( および .off( を使用してイベントをバインド/バインド解除します。$('#page') はページです。

これ:

$(window).click()

jQMページは単一のウィンドウイベントであり、毎回発生するため、ウィンドウにバインドします。また、複数のイベント バインディングについても心配する必要があります。この問題についての詳細は、こちらを参照してください。

于 2012-11-29T08:23:56.600 に答える
0

この問題について少し調査しましたが、適切な問題は見つかりませんでした。そのため、ウィンドウイベントを使用して説明されたユースケースのソリューションを実装しました。不気味ですが、機能します。

レイアウト:

1.Page div 宣言:

<div class="page" data-role="page" data-add-back-btn="true"    id="@Request.RawUrl.GetHashCode()">
    ...
</div>

2.スクリプト:

<script type="text/javascript">
    var bindEvents = [];
    $(document).bind('pagehide', function (event) {
        var hash = $(event.target).attr('id');
        $(window).unbind('.' + hash);
    });

    $(document).bind('pageshow', function (event) {
        var hash = $(event.target).attr('id');
        bindEvents[hash]();
    });
</script>

ページ内:

1.索引:

<script type="text/javascript">
var hashedIndex = '@Request.RawUrl.GetHashCode()';
if (!bindEvents.hasOwnProperty(hashedIndex)) {
    bindEvents[hashedIndex] = function() {
        $(window).bind('click.' + hashedIndex, function() {
            console.log('index');
        });
    };
};
</script>

2.概要:

<script type="text/javascript">
var hashedAbout = '@Request.RawUrl.GetHashCode()';
if (!bindEvents.hasOwnProperty(hashedAbout)){
    bindEvents[hashedAbout] = function () {
        $(window).bind('click.' + hashedAbout, function() {
            console.log('about');
        });
    };
};
</script>

必要に応じて、他のページと同様です。

一般的に、私は Gajotres に同意します。このような問題を回避するには、イベントをいくつかの内部コンテナーにバインドすることをお勧めします。

于 2012-11-29T12:40:49.493 に答える