When making Javascript files locally available in function, first time it's not working

Question

In my master page I am having one button, onclick this button intend to open a page in popup. For popup I have one javascript file. Now I want this file to load locally inside click function.

Now problem is first time it is not working and there after its working fine.

On click for first time of the button I am getting following error:

Uncaught ReferenceError: OpenModelWindow is not defined

But after that it's working fine. Here is my code:

 $('#<%=btnAddEvent.ClientID %>').click(function (e) {
    var script; var EventType="Task";   
    script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "../Calendar/JS/wdCalendar/src/Plugins/Common.js";  //OpenModelWindow is defined here
    document.getElementsByTagName("head")[0].appendChild(script);

     var url = "../Calendar/add.aspx" + EventType;                

                OpenModelWindow(url,
                { width: 660, height: 400,
                    caption: newcaption,

                });
                return false;
}

Can anybody tell me what's wrong I am doing so that I am not getting desired result first time.

Answer 1

I used jQuery done method and now it works for me...

 $.getScript('../Calendar/JS/wdCalendar/src/Plugins/Common.js').done(function(){
            OpenModelWindow(url,
                { width: 660, height: 400,
                    caption: newcaption,

                });
            });