jQuery 使用 .off() 删除事件处理程序时出现问题

Question

我曾尝试使用 .off() 删除事件处理程序，但它不起作用。

我想从某个输入中删除所有事件处理程序：

<input type="file" id="file_upload" name="file_upload" size="50" />

这是我尝试过的：

$('#form').on('keyup change', ':input', function() {
    registerChange();
});
$('#form input[name=file_upload]').off();
$('#file_upload').off();

Answer 1

您正在将事件绑定到表单元素。所以为了删除它，你需要再次使用表单标签：

// bind delegated events to form element
$('#form').on('keyup change', ':input', function () {
    registerChange();
});

// remove events later
$('#form').off();

您可能对 event delegation 感到困惑：on 方法的这种用法将事件附加到表单元素，它们在从子 :input.[=14= 冒泡后被捕获]

Answer 2

试试这个：

$('#file_upload').off('keyup change', ':input', function()
{
    registerChange();
});

Answer 3

您可以为文件上传按钮使用 not 选择器

$('#form').on('keyup change', 'input:not([name=file_upload])',  function() {
  registerChange($(this).val());
});

function registerChange(value) {
  // notice that typing into the upload textbox does not log anything to the console
  console.log(value);
}

$('#form').on('click', 'input[name=file_upload]', function () {
  alert('In Click Event Handler, Now Removing Myself');
  // here is how you can remove an event handler
  $('#form').off('click', 'input[name=file_upload]');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form">
  <input type="text" />
  <input type="text" />
  <!-- just changeing this to a textbox for demo -->
  <input type="text" id="file_upload" name="file_upload" size="50" value="Choose file" />
</form>

打开控制台 window（CTRL+SHIFT+J in chrome）并在所有文本框中键入。请注意前 2 个文本框是如何写入控制台的。另请注意，最后一个文本框定义了一个点击处理程序，然后将其删除，这就是警报只显示一次的原因。

jQuery 使用 .off() 删除事件处理程序时出现问题

jQuery Problems with removing event handler with .off()

javascript

jquery

event-handling