Javascript code doesn't work after putting the code as external file

Question

I'm applying a Javascript (JS) code for bootstrap modal(popup window) in my page. I'm planning to let it run dynamically as i enter an input into the textbox that appears from the popup window. Previously when i put the JS code in the layout page, it works. But when i tried to put the code in a separate JS file in a folder, it doesn't work anymore. Why is this? When i click the button, the popup window appears but when i entered input or clicked a button in the popup window, it didn't work. I've ensured that the file directory is not the problem.

I've also put the

<script type="text/javascript" src="~/Script/Modal.js"></script>

at the head section of the layout to ensure that it will be loaded dynamically.

This is what i put in my Modal.js file. Is it correct or am i missing something? I do have an if clause in between the codes.

$(function() {
// New Modal ================================================
$('#inputNew').on('hidden.bs.modal', function (e) {
    document.getElementById("inputNewCheckbox").checked = true;
    document.getElementById("inputMother").style.display = 'block';
    document.getElementById("inputMotherlabel").style.display = 'block';
    var value = $('#myPopupInput1').val();
    $('#inputMother').val(value);
    $('#inputNew').modal('hide');
});

$('#inputNew').on('click', '#SearchMother', function () {
   var value = $('#myPopupInput1').val();
   $('#inputMother').val(value);
   $('#inputNew').modal('hide');
});

if ($checkbox.data('waschecked') == true && $('#inputMother') != '') {
    if ($('#inputNewCheckbox').on("click", function () {
        $('#inputNewCheckbox').prop('checked', false);
    }));

}

})

This is the checkbox input in the View page

<input type="checkbox" name="inputNew" value="inputNew" id="inputNewCheckbox" data-toggle="modal" data-target="#inputNew" data-waschecked="false"> New

Answer 1

try putting your code in document.ready

$(document).ready(function () {
     // New Modal ================================================
     $('#inputNew').on('hidden.bs.modal', function (e) {
         document.getElementById("input").checked = true;
     });
})