Question

I am creating a Cakephp Application.. My problem is my Jquery work well when I load page first time. I mean when page is opened or controllers action is called first time. But when I try to render the view using ajax. Though view rendered successfully but class and ids are not operated by Jquery. I mean my jquery doesn’t work. If I render any view by Ajax.

Though I found trick to use same on the rendered view. But I don’t think its a good approach. Because I written a lot particular layout and I have combined all in top of particular layout. Its not possible to separate it and write it for particular views.

Help me why it fails for rendered view while my classes id’s all are same.?

Sample Code..BUt if any of my element reloaded either it would by ID or 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;
    }
);

});

Answer 1

pixelistik is right. On the callback from your ajax request, you’ll need to execute the javascript to attach events to those new DOM elements which have been loaded in on the AJAX request.

There are also ways to attach events to DOM elements that exist now or in the future, which should mean you can execute the Javascript once (on window load) and have it work even on the new DOM elements loaded in via AJAX.

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/) should be able to do the equivalent, if you call it in the right way.

Also see this article for a good explanation of different kinds of event binding: http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
Again, the methods described in that article are deprecated in favour of the new ‘on’ method, but the explanations should still be useful in deciding how you want to use the ‘on’ method.

Hope that helps!

PS – if you’re still having trouble paste some code.

EDIT:

I’ve taken a look at your code. I won’t rewrite all of it for you, but to give you an idea, you’d replace this block:

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;
    }
);

With something like this:

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;
});

I haven’t tested that code, by the way, but it should give you something to work with.

There’s further explanation of the new ‘on’ method here: http://blog.jquery.com/2011/09/28/jquery-1-7-beta-1-released/