0

私はCakephpアプリケーションを作成しています..私の問題は、ページを初めてロードしたときにJqueryがうまく機能することです。つまり、ページが開かれたとき、またはコントローラーのアクションが初めて呼び出されたときです。しかし、ajaxを使用してビューをレンダリングしようとすると. ビューは正常にレンダリングされますが、クラスと ID は Jquery によって操作されません。つまり、私のjqueryは機能しません。Ajaxでビューをレンダリングすると。

レンダリングされたビューで同じものを使用するトリックを見つけましたが。しかし、私はそれが良いアプローチだとは思いません。私は多くの特定のレイアウトを書き、特定のレイアウトの上にすべてを組み合わせたからです。それを分離して特定のビュー用に記述することはできません。

クラスIDがすべて同じであるのに、レンダリングされたビューで失敗する理由を教えてください。

サンプルコード..しかし、私の要素のいずれかがリロードされた場合、それは ID または CLASS MY JQUERY FAILS によって行われます。

   jQuery(document).ready(function(){
    //Sidebar Accordion Menu:
    jQuery("#main-nav li ul").hide(); // Hide all sub menus
    jQuery("#main-nav li a.current").parent().find("ul").slideToggle("slow"); // Slide down the current menu item's sub menu
    jQuery("#main-nav li a.nav-top-item").click( // When a top menu item is clicked...
    function () {
        jQuery(this).parent().siblings().find("ul").slideUp("normal"); // Slide up all sub menus except the one clicked
        jQuery(this).next().slideToggle("normal"); // Slide down the clicked sub menu
        return false;
    }
);
    jQuery("#main-nav li a.no-submenu").click( // When a menu item with no sub menu is clicked...
    function () {
        window.location.href=(this.href); // Just open the link instead of a sub menu
        return false;
    }
);
    // Sidebar Accordion Menu Hover Effect:
    jQuery("#main-nav li .nav-top-item").hover(
    function () {
        jQuery(this).stop().animate({ paddingRight: "25px" }, 200);
    },
    function () {
        jQuery(this).stop().animate({ paddingRight: "15px" });
    }
);


    //Close button:
    jQuery(".close").click(
    function () {
      jQuery(this).parent().fadeTo(400, 0, function () { // Links with the class "close" will close parent
            jQuery(this).slideUp(400);
        });
        return false;
    }
);

});
4

1 に答える 1

1

pixelistik は正しいです。ajax リクエストからのコールバックで、JavaScript を実行して、AJAX リクエストでロードされた新しい DOM 要素にイベントを添付する必要があります。

現在または将来存在する DOM 要素にイベントをアタッチする方法もあります。これは、Javascript を (ウィンドウの読み込み時に) 1 回実行するだけで、AJAX 経由で読み込まれた新しい DOM 要素でも動作させることができることを意味します。

See jQuery's 'live' method: http://api.jquery.com/live/ Note that this method is actually deprecated in jQuery 1.7, but the new 'on' method (http://api.jquery.com/on/ )正しい方法で呼び出すと、同等のことができるはずです。

また、さまざまな種類のイベント バインディングの適切な説明については、この記事を参照してください。この記事は、新しい「on」メソッドを支持して廃止されましたが、「on」メソッドをどのように使用するかを決定する際には、説明が引き続き役立つはずです。

それが役立つことを願っています!

PS - それでも問題が解決しない場合は、コードを貼り付けてください。

編集:

私はあなたのコードを見てきました。すべてを書き直すわけではありませんが、アイデアを提供するために、このブロックを置き換えます。

jQuery("#main-nav li a.no-submenu").click( // When a menu item with no sub menu is clicked...
    function () {
        window.location.href=(this.href); // Just open the link instead of a sub menu
        return false;
    }
);

このようなもので:

jQuery(document).on('click', "#main-nav li a.no-submenu", function () {
        window.location.href=(this.href); // Just open the link instead of a sub menu
        return false;
});

ちなみに、私はそのコードをテストしていませんが、何か作業する必要があるはずです。

ここに新しい「on」メソッドの詳細な説明があります: http://blog.jquery.com/2011/09/28/jquery-1-7-beta-1-released/

于 2012-06-23T23:14:01.663 に答える