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冒泡后捕获它们。

Answer 2

您可以使用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>

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

Answer 3

试试这个：

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

jQuery使用.off（）删除事件处理程序的问题

3 个答案: