Remove events on an HTML element

Question

I have a textarea element. Somewhere in this mess of legacy code I believe an event is registered preventing me from entering text into the textarea. I have tried the following code.

 $('#clinicalNotesEditable').off("keyup keydown keypress change blur"); $('#clinicalNotesEditable').on("click", function() { $(this).attr('disabled', false); $(this).attr('readonly', false); console.log('Click on textarea by ID'); // I can see the CLICK event is captured. }); $('#clinicalNotesEditable').on("keyup keydown keypress", function() { console.log('Key pressed on textarea by ID'); // I do not see this message. });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea class="noteseditable" id="clinicalNotesEditable" style="width: 370px !important; vertical-align: middle; display: inline-block; -ms-overflow-y: scroll;" placeholder="click here to enter a note" rows="8"></textarea>

The only thing I can think of is that I am not properly using .off() correctly. How can I remove all the events from the clinicalNotesEditable element?

Answer 1

You can iterate jQuery._data(<DOM element>, 'events') and remove both delegated and non-delegated events

 $("body").on('click', '#clinicalNotesEditable', function() { console.log('delegated'); }); $("body").on('click', function() { console.log('not delegated'); }); $('#clinicalNotesEditable').on("click", function() { $(this).attr('disabled', false); $(this).attr('readonly', false); console.log('Click on textarea by ID'); }); $('#clinicalNotesEditable').on("keyup keydown keypress", function() { console.log('Key pressed on textarea by ID'); //I see this in the CONSOLE }); var selector = '#clinicalNotesEditable'; $.each([$(window), $(document), $("*")], function(key, value) { $.each(value, function(k, v) { var event = $._data(v, "events"); if (event !== undefined) { $.each(event, function(a, b) { if (b[0].selector === selector) { $(v).off(a, '**'); } else { if ('#' + v.id === selector) { $(selector).off(a); } } }); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea class="noteseditable" id="clinicalNotesEditable" style="width: 370px !important; vertical-align: middle; display: inline-block; -ms-overflow-y: scroll;" placeholder="click here to enter a note" rows="8"></textarea>

Answer 2

Based on the order of the code you have here, if you re-arrange the code as the following:

 $('#clinicalNotesEditable').on("keyup keydown keypress", function() { console.log('Key pressed on textarea by ID'); //keyup keydown and keypress events are removed }); $('#clinicalNotesEditable').off("keyup keydown keypress change blur"); $('#clinicalNotesEditable').on("click", function() { $(this).attr('disabled', false); $(this).attr('readonly', false); console.log('Click on textarea by ID'); });

keyup keydown keypress events are removed, and you will see the text "Click on textarea by ID" in the console. I am not sure if this is what you are trying to achieve. I ran the code and I could add text in textarea.

Answer 3

You can unbind() instead of off()

 $('#clinicalNotesEditable').off("keyup keydown keypress change blur"); $('#clinicalNotesEditable').on("click", function() { $(this).attr('disabled', false); $(this).attr('readonly', false); console.log('Click on textarea by ID'); }); $('#clinicalNotesEditable').on("keyup keydown keypress", function() { console.log('Key pressed on textarea by ID'); //I see this in the CONSOLE }); $('#clinicalNotesEditable').unbind()

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea class="noteseditable" id="clinicalNotesEditable" style="width: 370px !important; vertical-align: middle; display: inline-block; -ms-overflow-y: scroll;" placeholder="click here to enter a note" rows="8"></textarea>