How do I delay javascript from executing after the click event?

programs! I’ve found solutions to similar problems such as mine here on the site but what’s happening to me is rather unusual and I don’t think they apply.

On this page: http://tdg.gswitchhost.com/calendar/

Read More

I’m locked into using this plugin which I really don’t care for. This is a WordPress site but the plugin, which lists upcoming events, doesn’t behave like WordPress. It has this system in place which is entirely unique to it. Posts live outside of the posts database table and you have to query these in an entirely different way. It’s a bummer. So my problem:

We have some jquery working its magic on the events list to add an accordion effect and this works. However. When you click on the pagination links to load the next set of events, the plugin, instead of linking to page 2 of events, it runs an asynchronous query and loads the next set of events on to the existing page without a page reload. If you click on one of the new events, the accordion no longer works.

What I think is happening is that on click, the plugin removes the entire UL which contains the events and loads a second entirely new one, containing the second record set, with the same class name but since the javascript initialized on the first UL, the one the plugin removed, the new set hasn’t been affected since the page didn’t reload and run the javascript again.

I’ve tried using .on() and the Livequery plugin to rerun the javascript when you click the pagination links but there’s a delay as the query is running and loading the new UL so I believe that the javascript runs again when you click on the link but because the UL hasn’t been loaded already when you click, there’s nothing for the jquery to work on.

Sorry this is so long but I just want to be as clear as possible. Am I wrong? This is killing me, I’m running out of time and I really need to get this to work so that no matter which set of events has been loaded on the page, the accordion function works on it.

Here’s the javascript that initializes the accordion:

$('.eventListingNew').accordion({
    headerClassName: 'accordionHeader',
    headerActiveClassName: 'accordionHeader-active',
    contentClassName: 'accordionContent',
    collapseAll: false,
    speed: 250
});

And here’s a pastebin of the entire accordion function since it’s so long. http://pastebin.com/BvDseg3g

Related posts

Leave a Reply

1 comment

  1. Easy thing is just call it when the Ajax complete is done running to reinitialize it.

    $(document).ajaxComplete(function(event, xhr, settings) {
    
        $('.eventListingNew').accordion({
            headerClassName: 'accordionHeader',
            headerActiveClassName: 'accordionHeader-active',
            contentClassName: 'accordionContent',
            collapseAll: false,
            speed: 250
        });
    
    });