删除 select 标签上的 class 后焦点事件不会消失

Question

我有一个带有 class 名称的 select 标签，如下所示：

<select name="names" id="select" class="change-me">
  <option value="">Select Name</option>
  <option value="saikiran"> Saikiran</option>
  <option value="srikanth">Srikanth</option>
  <option value="ashok">Ashok</option>
</select>

名称为 class 的 select 标签具有如下功能：

$('select.change-me').on('focus',function(){
  swal("click on fake ajax btn should not bring this popup");
});

我在页面上执行了一些操作，例如单击按钮，我正在删除此 select 标记的 class。

$('#click').on('click',function(){
  $('#select').removeClass('change-me');
});

删除 class 名称后，select 标签上的焦点事件仍然有效。谁能告诉我为什么会这样。

我试着把所有这些都放在代码笔里。请在下方查看

Check the pen here

Answer 1

您已将函数绑定到 select.change-me 元素，即使删除 class 也不会从该元素中删除该元素。您需要 unbind 如下所示。

$('#click').on('click',function(){
  $("select.change-me").unbind("focus");
  $('#select').removeClass('change-me');
});

https://codepen.io/anon/pen/wPKKdX

请注意，可能有其他 select 元素具有相同的 class 并在您的 HTML 中绑定了该函数，此代码将删除它们。所以我建议在使用 unbind 函数时使用 id。

Answer 2

change 事件绑定到 select 元素。您要删除 class，但不再检查 class，因此这没有区别。您可以在更改事件中添加对 class 的检查以解决此问题，例如

$('select.change-me').on('focus',function(){
  if(!$(this).hasClass('change-me')) {
  swal("click on fake ajax btn should not bring this popup");
  }
});

Updated Codepen.

删除 select 标签上的 class 后焦点事件不会消失

focus event not dying after removal of class on select tag

jquery

events

select

focus