javascript - 使用 .off() 删除事件处理程序的 jQuery 问题

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

您可以为文件上传按钮使用一个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>

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