Question

我有一个带有类名的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>

这个带有类名的select标签具有如下功能：

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

我在页面上有一些操作，例如点击按钮，我将删除此选择标记的类。

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

删除类名后，select标签上的焦点事件仍然存在。任何人都可以告诉我为什么会这样。

我试图把所有这些都放在codepen中。请在下面查看

Check the pen here

Answer 1

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

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

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

请注意，可能有其他select元素具有相同的类，并且在HTML中具有绑定的功能，此代码将全部删除它们。因此，我建议在使用id函数时使用unbind。

Answer 2

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

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

Updated Codepen

删除选择标记上的类后，焦点事件不会消失

2 个答案: