My jquery function stops working when I change route

I have a jquery function responsible for cropping a photo when a photo upload occurs:

document.addEventListener('DOMContentLoaded', function() {

    function readImage() {
        if (this.files && this.files[0]) {
            var file = new FileReader();
            file.onload = function(e) {
                document.getElementById("preview").src = e.target.result;
            };
            file.readAsDataURL(this.files[0]);
        }
    }

    document.getElementById("file").addEventListener("change", readImage, false);

    var x = document.getElementById("myDIV");

    $("[type=file]").on("change", function() {
        var file = this.files[0];
        var formdata = new FormData();
        formdata.append("file", file);
        if (file.name.length >= 30) {
            $('#name span').empty().append(file.name.substr(0, 30) + '..');
        } else {
            $('#name span').empty().append(file.name);
        }
        if (file.size >= 204800) {
            $('#preview').hide();
            $('#imgpadrao').show();
        } else {
            $('#imgpadrao').hide();
            $('#preview').show();
            $('.img-result').removeClass('hide');
        }
        var ext = $('#file').val().split('.').pop().toLowerCase();
        if ($.inArray(ext, ['png', 'jpg', 'gif', 'bmp']) == -1) {
            $('#info').hide();
            $('#size').hide();
            $('#labelfile').text('Escolha uma foto');
            $('#file').val('');
            $('#preview').hide();
            alert('Essa extensão de foto não é permitida!');
        }
    });

    //funcao crop:
    var cropper = '';
    $("#file").change(function(e) {
        if (e.target.files.length) {
            var file = this.files[0];
            if (file.size >= 204800) {
                $('.result').addClass('hide');
                $('#botaocortar').addClass('hide');
                alert('Esta imagem excedeu o tamanho máximo permitido (200kb)');
            } else {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var img = document.createElement("img");
                    img.id = 'image';
                    img.height = '300'
                    img.src = e.target.result;
                    $('.result').html('');
                    $('.result').removeClass('hide');
                    $('.result').append(img);
                    $('#botaocortar').removeClass('hide');
                    $('.options').removeClass('hide');
                    cropper = new Cropper(img);
                };
                reader.readAsDataURL(e.target.files[0]);
            }
        }
    })
    $('#botaocortar').click(function(e) {
        e.preventDefault();
        var imgSrc = cropper.getCroppedCanvas({
            width: $('.img-w').val() 
        }).toDataURL();
        $('.cropped').removeClass('hide');
        $('.img-result').removeClass('hide');
        $('.cropped').attr('src', imgSrc);
        $('.download').removeClass('hide');
        $('.download').attr('download', 'imagename.png');
        $('.download').attr('href', imgSrc);
    })
});

The problem is that when I change my route and then go back to the page where the script should run, the function is not executed, it is only executed after I refresh the page. Anyone have any idea what might be happening?