jquery - 使用 jQuery 删除并向按钮添加类，添加的新类将无法使用它的点击功能

Question

我有 2 个按钮，单击一个将为两个按钮交换类。
这些类是选中 和未选中。

我的 CodePen:
<强> http://codepen.io/leongaban/pen/iLBvs

例如:单击“登录”按钮将删除其未选择的类并为其提供已选择的类，并为注册按钮提供其未选择的类。

现在的问题是 register_unselected 类不起作用。 unselected 类是在我的 jQuery 中具有click 操作的类。

我应该能够一直点击灰色按钮并将其变为蓝色。但是，在单击第一个灰色按钮(登录)后，新的灰色按钮注册不起作用。

使用 Chrome 的检查器我可以清楚地看到我的 register_unselected 类已经添加，但是点击功能不起作用。

有什么想法吗？你会如何处理这个问题？

// Login Tab (default : first)
$(".login_unselected").click(function(){

  console.log('clicked login');

  // Show Login Tab as selected
  $(this)
    .removeClass('login_unselected')
    .addClass('login_selected');

  // Show Register Tab as unselected
  $(this).parent().find('#tab_register')
    .removeClass('register_selected')
    .addClass('register_unselected');

});

// Register Tab
$(".register_unselected").click(function(){

  console.log('clicked register');

  // Show Login Tab as selected
  $(this)
    .removeClass('register_unselected')
    .addClass('register_selected');

  // Show Register Tab as unselected
  $(this).parent().find('#tab_login')
    .removeClass('login_selected')  
    .addClass('login_unselected');

});

Answer 1

当您调用 $(".register_unselected").click() 时，jQuery 实际上会在 DOM 中搜索任何与 .register_unselected 匹配的元素，然后监听它们的点击事件.由于在调用此方法之前您的元素不存在，因此这将无效。

相反，使用 $("body").on("click", ".register_unselected", function(){});

您还可以将 body 替换为另一个始终包含元素更改类的选择器。

编辑:这是一个 fork 的 CodePen:http://codepen.io/anon/pen/DqFuL