使用 jQuery 删除和添加类到按钮，添加的新类将无法使用它的点击功能

Question

我有 2 个按钮，单击一个将交换两个按钮的类。
类是 selected 和 unselected。

我的 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 替换为另一个始终包含元素更改类的选择器。

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

Answer 2

没有人给出更明显和优雅的解决方案。

让我们稍微清理一下 CSS：

//instead of .login_unselected, .registerunselected  
.target {
      color: #ccc;
      background: #666;
      cursor: pointer;
}

//instead of .x_selected, .y_selected
.selected {
      color: #fff;
      background: #3399cc;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

所以 HTML 现在是

<ul>
    <li id="tab_login" class="target">Login</li>
    <li id="tab_register" class="target">Register</li>
</ul>

jQuery 是：

$("ul").on("click", ".target", function(){

      // Remove selected class from any that have it
      $(".target").removeClass('selected');
      // Add class to the one you're clicking on
      $(this).addClass('selected');

});

您可以将其称为.unselected，而不是调用类.target。从您的问题的上下文来看，您可能不需要两个单独的类，将类应用于许多元素，如果您需要单独引用它们，您已经有了ids。

还请记住，您可以将多个类应用于一个元素，然后通过在最后一个类上指定不同的属性值来覆盖一个类的样式。最后应用的任何类都将覆盖已应用到它的任何类的设置，除非您希望覆盖的属性的值尚未在覆盖类中指定。

Answer 3

当您根据类分配点击处理程序时，处理程序会在当时与该类匹配的按钮上设置。他们不会因为你改变了课程而改变。您需要实现一个单击处理程序，该处理程序检测单击时设置了哪些类并采取相应措施。

Answer 4

使用.on() 委托来自静态且包含两者的dom 元素的点击事件。

所以，如果在页面加载时，你有：

<ul id="container">
    <li class="login_selected">Login</li>
    <li class="register_unselected">Register</li>
</ul>

然后，不要使用 .click()，而是这样做：

$('#container').on('click', '.login_unselected', function(){
     //do stuff
});

和

$('#container').on('click', '.register_unselected', function(){
     //do stuff
});

Answer 5

你也可以这样做

// 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

$("#tab_register").click(function(){

  console.log('clicked register');
    if($(this).hasClass("register_unselected")){
  // 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'); 
    }
});

听ID然后检查是不是这个类。

.on 更快

[http://www.jsperf.com/change-class-on-click]