Allow this code to work with Ajax?

Question

I have this code - which works perfectly when pages aren't lazy loaded with AJAX.

As soon as AJAX gets involved it doesn't work at all until the page is refreshed.

omShortcodes.modules.toggle = {
init: function() {

    jQuery('.omsc-accordion .omsc-toggle').addClass('omsc-in-accordion').find('.omsc-toggle-title').click(function(){

        var $toggle=jQuery(this).parent();

        if($toggle.hasClass('omsc-expanded')) {
            $toggle.removeClass('omsc-expanded');
            $toggle.find('.omsc-toggle-inner').slideUp(300);
            return false;
        }

        var $acc=$toggle.parents('.omsc-accordion');
        if(!$acc.hasClass('omsc-multiopen'))
            $acc.find('.omsc-toggle.omsc-expanded').removeClass('omsc-expanded').find('.omsc-toggle-inner').slideUp(300);

        $toggle.find('.omsc-toggle-inner').slideDown(300,function(){
            var h=jQuery(this).parent().height();
            var pos=jQuery(this).parent().find('.omsc-toggle-title').offset();
            var scroll=jQuery(window).scrollTop();
            var wh=jQuery(window).height();
            if(pos.top < scroll || (pos.top > scroll && pos.top+h > scroll+wh))
                jQuery('html,body').animate({ scrollTop: pos.top+'px' }, 200);
        }).find('iframe[src*="maps.google"]').each(function(){
            jQuery(this).attr('src',jQuery(this).attr('src'));
        });
        $toggle.addClass('omsc-expanded');

    });

    jQuery('.omsc-toggle').not('.in-accordion').find('.omsc-toggle-title').click(function(){

        var $toggle=jQuery(this).parent();

        var $inner=$toggle.find('.omsc-toggle-inner');
        if(!$inner.length)
            return false;
        if($inner.is(':animated'))
            return false;

        $toggle.toggleClass('omsc-expanded');
        $inner.slideToggle(300);
        if($toggle.hasClass('omsc-expanded')) {
            $inner.find('iframe[src*="maps.google"]').each(function(){
                jQuery(this).attr('src',jQuery(this).attr('src'));
            });
        }

        return false;
    });

}
}

Is there another way of handling this to be able to work properly with AJAX?

@bergi How do you ```.addClass('omsc-in-accordion')``` on dynamically created elements? Delegated events may not be enough here, replacing ```init: function() {``` by ```init: function($parent) { $parent = $parent || jQuery(document); $parent.find('.omsc-accordion .omsc-toggle')``` may be a better solution in this case. — Volune, Aug 18 '14 at 19:13
@Volune: Hm, that's true. If such is required, then each ajax that updates the page would need to call `init()` on the respective section (or use some pub/sub mechanism). Should I reopen it? — Bergi, Aug 18 '14 at 19:20
We can wait to see if @jblz ask for it or if delegated events are enough. — Volune, Aug 18 '14 at 19:21
@Volune Perhaps I should have mentioned I started learning Javascript today and the above isn't my code. I'm not sure what you mean. — jblz, Aug 18 '14 at 19:21
If you're starting, I'd say: first look at [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements), and open more precise questions if you feel the need. (I'm not sure what is best practice on SO) — Volune, Aug 18 '14 at 19:24

Allow this code to work with Ajax?

0 Answers0