4

現在、サーバーからデータを受信し、折りたたみ可能な要素を動的に作成するアプリケーションを作成しています。これで、アプリケーション全体で折りたたみ可能な要素の開閉のアニメーションを可能にするコードができました。

$('[data-role="collapsible"]').bind('expand', function () {
            $(this).children().slideDown(500);
        }).bind('collapse', function () {
            $(this).children().next().slideUp(500);
        });

現在、このコードは、動的に作成された折りたたみ可能な要素では機能しません。したがって、私がやろうとしたことは次のとおりです。

$(document).on('pagechange','#resultssearch',
    function()
    {
        $('[data-role="collapsible"]').bind('expand', function () {
            $(this).children().slideDown(500);
        }).bind('collapse', function () {
            $(this).children().next().slideUp(500);
        });

    });

そのため、動的な折りたたみ可能な要素が追加されたページで、上記のページ イベントを追加しようとしました。しかし、これもうまくいかないようです。動的に生成してアニメーション化するにはどうすればよいですか?

提案された回答に示されているように、機能するコードは次のようになります。

$(document).on('expand', '[data-role="collapsible"]', function () {
     $(this).children().slideDown(500);
 }).on('collapse', '[data-role="collapsible"]', function () {
     $(this).children().next().slideUp(500);
 });

これは 100% 機能しません。子折りたたみ可能オブジェクトのイベントは、最終的に親折りたたみ可能オブジェクトに影響を与えます。これについては、こちらで確認できます。子供の折りたたみ式がこれを行うのを止める方法はありますか?

4

3 に答える 3

3

イベント代表団、友よ。その要素を静的な親またはdocumentオブジェクトにバインドする必要があります。折りたたみ可能なものを動的に追加する場合、その特定の時点で存在しない要素にイベントを追加しても意味がありません。ここでのアプローチは、expandandcollapseイベントを直接の親 (既に存在するpagechange(またはむしろ使用pageshow) に追加するかdocument、次のように常に存在する に追加することです:

 $(document).on('expand', '[data-role="collapsible"]', function () {
     $(this).children().slideDown(500);
 }).on('collapse', '[data-role="collapsible"]', function () {
     $(this).children().next().slideUp(500);
 });

または、単純に、次のように結合します。

$(document).on({
    "expand": function () {
        $(this).children().slideDown(500);
    },
    "collapse": function () {
        $(this).children().next().slideUp(500);
    }
}, '[data-role="collapsible"]');

詳しくはドキュメントをご覧ください。

于 2013-07-02T18:47:14.077 に答える
1

委任を追加することはできませんか?

$('body').on('expand','[data-role="collapsible"]', function () {
        $(this).children().slideDown(500);
    }).bind('collapse', function () {
        $(this).children().next().slideUp(500);
    });

これは、 [data-role..... のすべての一致が発生することを意味します。これは、ボディに実際にイベントがあり、基本的にそれを子に送信するためです。

于 2013-07-02T18:52:09.350 に答える