Making a grid work in a tab

I purchased a html5 theme that I am customizing for my church website. It has two cool features:

1. A tab script that allows for multiple items to displayed on one page.

2. A grid that will allow me to display sermons in a series in a neat and orderly way.

Both of these work well when used alone, but when I try to use the grid inside the tabs, no dice. I am a design guy and know very little about Javascript functions and need help. Here is what the developer, who has not got back with me said to do:

"The grid function is built to run on page load and when you put it inside a tab it doesn’t initialize on page load so don’t work when you change tabs. A custom function needs to be built for this which will run the isotope grid on tabs change. Like:"

$(".nav-tabs li").click(function(e){
e.preventDefault();
ADORE.IsoTope();
});

I did this and added it after the:

var ADORE = window.ADORE || {};

I tried this and it didn't work so I went on one forum and he said to take out:

e.preventDefault();

Well in Safari, it worked the first time when you click on tab "2". However, when you click back on tab "1" it goes away and when you click back on tab 2 it is gone. The other browsers didn't work at all with this change. Here is the dropbox link with my code with the .js file and php. Any help would be appreciated.

https://www.dropbox.com/s/2ktzkvz8jy7128l/code.zip?dl=0

 

That looks like jQuery syntax. Try changing .click(function(e) { to .on('click', function(e) {

.on triggers on content presented via other functions and js in general (instead of just depending on the dom as it is made on page-load). However, I don't know the rest of the code, or the ADORE-functions, so it might not work. Worth trying, though.