Undefined javascript function after $.getScript('');

Question

I need to load a file . js after an ajax call. I have been searching and found the $.getScript('') to call my file, it opens, everything is fine, but the functions defined in that file are not being found.

I have a clicklistener function defined like this:

var record = $('#record');

record.onclick = function () {

            startTimer(1);
            mediaRecorder.start(50);
            console.log("recorder started");

        }

when I click on the button with the id record nothing happens. I’ve tried to put a name to this function and call it on the button:

<button type="button" onclick="javascript:startRecord();" id="record">Record</button>

but it was also not recognized. What is the correct technique to do what I want?

Note: I don’t just put the script on the page (before ajax call) because I need DOM values and elements that result from this call. I am working on MVC, the ajax call is in a razorView returns html resulting from a controller

Answer 1

It seems to me that you are not grantindo that the script was loaded and or are forgetting to initialize something, if it is only the first case this should solve:

  <button type="button" id="record">Record</button>

Bind in $.Getscript done event('')

    $.getScript( "seu_script.js" )
    .done(function( script, textStatus ) 
     {
       $('#record').click(function(){
        mediaRecorder.start(50);
        console.log("recorder started");
       });
     });