javascript - After include javascript file, how i can delete/remove

Question

because I use ajax, to access content on my website; I have this code # 1 that dynamically includes a javascript file of different directory (depending on the content loaded) but that includes the same function.

Code #1:

var formContent = $("body form").first().attr('name');
if (typeof formContent != 'undefined') {            
    var uri = "classJS/" + formContent + "/jsc.js"; //File Javascript repeate in diferent directories.
    fetch(uri, { method: 'GET', type: 'HEAD' }).then(function(resp) {
        if (resp['status'] === 200) {

            //if Exist the Default Function (FunctionForms) set this to undefined.
            if (window.isFunction(window.FunctionForms)) {
                window.FunctionForms = undefined;
            }

            $.getScript(uri).done(function() {
                window.FunctionForms(formEvent); //call or Re-Call the function.
            });


        } else {
            console.log('%cNot find Script file: ' + formEvent, 'color: red');
        }
    });
}

Code # 2, This function (repeated in every file) is dedicated to charge other specific function for the content loaded, example:

Code #2 File 1: (Can be loaded N times)

function FunctionForms(formEvent) {
    console.log('%cCarga de Script JS para: ' + formEvent, 'background: #222; color: #bada55');
    window.Test();
}

function Test(){
    $('[name="s_list_2"]').unbind('click.form');
    $(document).on("click.form", '[name="s_list_2"]', function(event) {
        console.log('Is clicked');
    });
}

this same file from other directories may have a subtly different content:

function FunctionForms(formEvent) {
    //not used.........
    console.log('%cCarga de Script JS para: ' + formEvent, 'background: #222; color: #bada55');
}

Then: it happens that if I enter the same content 5 times; the system includes 5 times the same file; but it does not overwrite the function or remove it, in the opposite case it stores it in different instances; causing it to run N number of times: in a console ooutput I get this.

VM6933:27 Is clicked
VM6944:27 Is clicked
VM6986:27 Is clicked
VM7022:27 Is clicked
VM7105:27 Is clicked

I understand that apparently this is not doing what I expect:

if (window.isFunction(window.FunctionForms)) {
    window.FunctionForms = undefined;
}

标签： javascriptjquerycross-browser

Answer 1

The problem is not with the function, the problem is with the event binding. Every time you load the file, it does:

$(document).on("click.form", '[name="s_list_2"]', function(event) {
    console.log('Is clicked');
});

which adds another click handler.

It looks like you tried to remove the old handler first, but you didn't do it correctly. To remove a delegated event handler, you have to use the same delegation syntax with .off():

$(document).off("click.form", '[name="s_list_2"]');

You're using:

$('[name="s_list_2"]').unbind('click.form');

which would only remove a handler that had been added with:

$('[name="s_list_2"]').on('click.form', function ...);