使用jQuery删除并向按钮添加类,添加的新类将无法使用它的单击功能

Question

我有2个按钮,单击一个将交换两个按钮的类.
课程是selected和unselected.

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

例如:单击Login按钮将删除它的未选择的类并为其指定选定的类,并为Register按钮提供未选择的类.

现在的问题是该register_unselected课程不起作用.这些unselected类是我的jQuery 中有单击操作的类.

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

使用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