尽管所有权发生了变化，我的EventListener仍会继续触发，为什么？ （JavaScript的）

Question

I have a function, which at the end of its task assigns a button to a new id.

function altChecker() {
    var doc = document,
        out = [],
        appButton = doc.getElementById('appButton'),
        //re = /click-me/gi,
        output = doc.createElement('p');

    output.setAttribute('id', 'output');

    EventUtility.addHandler(appButton, 'click', function(e) {

//I have not included all the function details to concentrate on the question

        appButton.id = 'appButtonNextChecker';
        var appButtonNextChecker = doc.getElementById('appButtonNextChecker');

        nextChecker(appButtonNextChecker);

    });

}

function nextChecker(newBtnName) {
    EventUtility.addHandler(newBtnName, 'click', function(e) {
      $('#output').innerHTML = "";
      console.log('next Checker, button!')
    });
}

So basically there is one button in the DOM assigned to appButton ID initially, and then I change it doing:

appButton.id = 'appButtonNextChecker';

when the altChecker function fires...

Then I assign the button to a new variable, and pass in the variable to the next function...

var appButtonNextChecker = doc.getElementById('appButtonNextChecker');

nextChecker(appButtonNextChecker);

While I can see the buttons' ID change in the DOM, and I see the console.log fire in the nextChecker function,

$('#output').innerHTML = ""; //doesn't fire

AND the altChecker function fires as well (again)?! Haven't I severed the connection to the click function when I reassigned the new ID?

Any help would be appreciated!

Answer 1

Javascript doesn't remember that you initially attached the event through it's id. The event is attached to the element itself, not the ID. It's not like CSS that way.

In fact your variables are still holding the same element as well, so there's no need to create a new variable after changing the ID, either. Since you're using jQuery you can just type $(appButton).unbind(); to remove the event handler. You may also want to look into .on() and .off()

Answer 2

The problem is that you're trying to use the innerHTML property in a jQuery's object.

That property belongs to Element , and it will not work in the way you're using it.

You can use the document.getElementById method, and it will work fine:

document.getElementById('output').innerHTML = '';

Or you can use jQuery's html method:

$('#output').html('');

And you can even use the first element of the jQuery's array, and use innerHTML again:

$('#output')[0].innerHTML = '';

It's up to you, but the first option will be faster, for sure.