Jquery Onclick第二次没有发生

我有点困惑为什么这不起作用; 我假设因为我正在添加类并且它没有被添加回集合中我不确定。

这里是jsbin http://jsbin.com/ayije，虽然代码也在下面。

无论哪种方式，我只能在元素上执行一次动作。

    $(document).ready(function () { $('.optional').click(function () { $(this).removeClass('optional').addClass('selected'); return false; }); $('.selected').click(function () { $(this).removeClass('selected').addClass('rejected'); return false; }); $('.rejected').click(function () { $(this).removeClass('rejected').addClass('optional'); return false; }); });     a {padding:2px;color:white;} .optional {background-color:blue;} .selected {background-color:green;} .rejected {background-color:red;}  
 a b c 
   

Answer 1

这是因为点击处理程序仅适用于那些在文档加载时匹配的元素。 您应该使用单独的类来标识所有链接，然后设置单击处理程序，该处理程序查看链接所具有的类，然后执行相应的类转换。

 $(document).ready(function () { $('.clickable').click(function () { var $this = $(this); if ($this.hasClass('optional')) { $this.removeClass('optional').addClass('selected'); } else if ($this.hasClass('selected')) { $this.removeClass('selected').addClass('rejected'); } else if ($this.hasClass('rejected')) { $this.removeClass('rejected').addClass('optional'); } return false; }); }); 
 a b c  

Answer 2

不确定您是否已经知道这一点….查看.live（）function的jquery文档。 这样，你可以做这样的事情。

 $('.optional').live('click', function () { $(this).removeClass('optional').addClass('selected'); return false; }); 

然后您不必担心文档加载时不存在的类。 当类改变元素时，它们将自动被绑定。

Answer 3

您可以像这样更改代码

 $(document).on("click", ".clickable", function(){ var $this = $(this); if ($this.hasClass('optional')) { $this.removeClass('optional').addClass('selected'); } else if ($this.hasClass('selected')) { $this.removeClass('selected').addClass('rejected'); } else if ($this.hasClass('rejected')) { $this.removeClass('rejected').addClass('optional'); } return false; }); 

Answer 4

您还可以将单击处理程序更改为实时单击处理程序：

 $(document).ready(function () { $('.optional').live('click',function () { $(this).removeClass('optional').addClass('selected'); return false; }); $('.selected').live('click',function () { $(this).removeClass('selected').addClass('rejected'); return false; }); $('.rejected').live('click',function () { $(this).removeClass('rejected').addClass('optional'); }); });