我有 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');
});
最佳答案
当您调用 $(".register_unselected").click()
时,jQuery 实际上会在 DOM 中搜索任何与 .register_unselected
匹配的元素,然后监听它们的点击事件.由于在调用此方法之前您的元素不存在,因此这将无效。
相反,使用 $("body").on("click", ".register_unselected", function(){})
;
您还可以将 body
替换为另一个始终包含元素更改类的选择器。
编辑:这是一个 fork 的 CodePen:http://codepen.io/anon/pen/DqFuL
关于jquery - 使用 jQuery 删除并向按钮添加类,添加的新类将无法使用它的点击功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17098133/