Call method in jQuery plugin

Question

I've downloaded The Schedule Template from Codyhouse - it's a jQuery plugin (and CSS) that creates a Calendar Schedule on a div.

The jQuery plugin autoruns since all code in the .js file (main.js) is placed in the document.ready function:

jQuery(document).ready(function($){
..
..  function SchedulePlan( element ) {
        this.element = element;
        this.timeline = this.element.find('.timeline');
..
..
} 

The problem is that the div element I'm trying to apply the Schedule template to isn't created (dynamically created via JavaScript) when document.ready fires.

Is there some way to call the SchedulePlan function from JavaScript, after the div is created?

#calendarDetail is the div. I've tried a few syntaxes, such as:

$("#calendarDetail").SchedulePlan($('#calendarDetail'));

and

$().SchedulePlan($('#calendarDetail'));

But I get this error:

SchedulePlan is undefined

Is there any way to call this method?

Answer 1

The plug in does not expose a method for doing this, so I would suggest to delay the loading of the plug in until you have all your elements with the cd-schedule class loaded in the DOM.

So remove the <script src="main.js"></script> element you have, and instead add this code at the right place, so it executes at the appropriate time:

$.getScript("main.js");