Jquery Onclick 没有第二次发生答案

【问题标题】：Jquery Onclick not happening second timeJquery Onclick 没有第二次发生
【发布时间】：2009-09-01 15:05:24
【问题描述】：

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

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

无论哪种方式，我只能让动作在一个元素上发生一次。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
        $(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;
            });
        });
        </script>
    </head>
    <body>
        <style>
            a {padding:2px;color:white;}
            .optional {background-color:blue;}
            .selected {background-color:green;}
            .rejected {background-color:red;}
        </style>


        <div id="tagContainer"> 
        <a href="#" class="rejected">a</a>
        <a href="#" class="optional"">b</a>
        <a href="#" class="selected">c</a>
    </div>
    </body>
</html>

【问题讨论】：

标签： jquery collections click repeat iteration

【解决方案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;
    });
});


<div id="tagContainer"> 
    <a href="#" class="clickable rejected">a</a>
    <a href="#" class="clickable optional">b</a>
    <a href="#" class="clickable selected">c</a>
</div>

【讨论】：

谢谢；我原以为它会简单一点，但你明白了 - 谢谢！
现在有两种方法；这个或住 - 选择哪个：S
如果您要添加/删除元素，则实时适用。如果元素本身（不是类）保持静态，则无需应用实时处理程序——这会带来一些额外的限制。它可能会在一定程度上简化您的代码，但代价是失去停止传播的能力等。请参阅文档中的限制：docs.jquery.com/Events/live#typefn
我可能应该说实时处理程序旨在解决的问题是将处理程序应用于添加/删除的元素。当然，它们也可以以其他方式应用。

【解决方案2】：

不确定您是否已经知道这一点……请查看有关 .live() 功能的 jquery 文档。这样，你就可以做这样的事情了。

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

然后您不必担心在文档加载时类不存在。随着元素的类发生变化，它们会自动绑定到。

【讨论】：

哦，这看起来也很有趣！

【解决方案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;    
});

【讨论】：

.live 的其他建议现已弃用

【解决方案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'); 
        });
    });

【讨论】：

gah 有两种方法 - 选择：S