How to remove this event listener on HTML element with JQuery

Question

I have an HTML page that is partially generated by a 3rd party that I cannot change. However, I can add my own Javascript to the page to modify it's behavior.

I want to remove a keypress event listener from an input textbox.

In Chrome dev tools, if I view the element, I can see the following two events tied to a keypress:

I added the second event listener with the following code:

$('#signInName').keypress(function (e) {
    var key = e.which;
    if(key == 13 && $('.sendCode').css('display') != 'none')
    {
        $('.sendCode').trigger('click');
        return false;
    }
});

I want to remove the first listener in the image. If I click the 'remove' button in dev tools I can confirm that I get the functionality I want, which is to click a different button when I press ENTER, than what the 3rd party has set to fire.

I can see that I can get access to the events using this jquery:

> $('#signInName').keypress.length
< 2

But, I am very limited in my JQuery or javascript experience, and I want to remove the event listener as mentioned.

How can I reference and remove this other event listener preferably using a static identifier and without using the exact index of 0 in the collection, which might change?

Does this answer your question? [JavaScript: remove event listener](https://stackoverflow.com/questions/4402287/javascript-remove-event-listener) — MrUpsidown, Nov 07 '22 at 12:00

score 0 · Accepted Answer · answered Nov 04 '22 at 16:02

0

Name the function:

signInNameKeypressHandler = e => {
    var key = e.which;
    if(key == 13 && $('.sendCode').css('display') != 'none')
    {
        $('.sendCode').trigger('click');
        return false;
    }
}
$('#signInName').keypress(signInNameKeypressHandler);
//later
$('#signInName').off('keypress', signInNameKeypressHandler);

answered Nov 04 '22 at 16:02

Dr. Vortex

505
1
3
16

If I am understanding correctly you are showing me how to turn off the event handler that I added. However, I need to turn off the event handler that another piece of code added. I do not know how to reference it, or to turn it off. I don't know the name of the function. The first step would be to enumerate the handlers in some way so that I could then use it in the `.off` method. Alternatively, if I just try `$('#signInName').off('keypress');` it also doesn't remove any handlers. – Appleoddity Nov 04 '22 at 20:34
1

Not sure what I missed the first time. But, I was able to use what you put here to solve the problem. I first use `$('#signInName').off('keypress');` which removes all the handlers and then use `$('#signInName').keypress(signInNameKeypressHandler);` to add my handler which works as expected. It doesn't fully answer the question, but I'm going to mark it solved anyways. I really would rather know how to enumerate and remove a specific handlers, rather than removing all and re-adding. – Appleoddity Nov 04 '22 at 21:21

kaledev · Answer 2 · 2022-11-04T21:55:21.183

0

You can use remove removeAttr for removing first event listener before defining your event listener.

$("#signInName").off("keypress");
$('#signInName').keypress(function (e) {
    var key = e.which;
    if(key == 13 && $('.sendCode').css('display') != 'none')
    {
        $('.sendCode').trigger('click');
        return false;
    }
});

edited Nov 04 '22 at 21:55

answered Nov 04 '22 at 17:42

kaledev

44
4

I was hopeful this would work. After testing, it doesn't remove any event handlers. Regardless if I use it before or after adding my own, no event handlers are removed. – Appleoddity Nov 04 '22 at 20:33
If then, you can use off method. I updated my solution. – kaledev Nov 04 '22 at 21:55

How to remove this event listener on HTML element with JQuery

2 Answers2