[英]Remove events on an HTML element
我有一個textarea
元素。 在這堆遺留代碼的某個地方,我相信注冊了一個事件,阻止我在 textarea 中輸入文本。 我試過下面的代碼。
$('#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>
我唯一能想到的是我沒有正確使用.off()
。 如何從clinicalNotesEditable
元素中刪除所有事件?
您可以迭代jQuery._data(<DOM element>, '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>
根據您在此處獲得的代碼順序,如果您將代碼重新排列如下:
$('#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 按鍵事件被刪除,您將在控制台中看到文本“Click on textarea by ID”。 我不確定這是否是您想要實現的目標。 我運行了代碼,我可以在 textarea 中添加文本。
你可以 unbind() 而不是 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.