Jquery Onclick не происходит во второй раз

Я немного смущен тем, почему это не работает; Я предполагаю, что, поскольку я добавляю класс, а он не добавляется обратно в коллекцию, я не уверен.

Вот он на 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>

collections click jquery iteration repeat
person Phill Price    schedule 01.09.2009    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Это связано с тем, что обработчики кликов применяются только к тем элементам, которые совпадают при загрузке документа. Вы должны использовать отдельный класс для идентификации всех ссылок, а затем настроить обработчик одного клика, который просматривает класс, который имеет ссылка, а затем выполняет соответствующее преобразование класса.

$(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>
person tvanfosson    schedule 01.09.2009
comment
благодарю вас; Я думал, что это будет немного проще, но вы поняли - спасибо! - person Phill Price; 01.09.2009
comment
теперь есть два пути; это или жить - что выбрать :С - person Phill Price; 01.09.2009
comment
Live применяется, если вы добавляете/удаляете элементы. Если сами элементы (не классы) остаются статичными, нет необходимости применять живые обработчики, которые имеют некоторые дополнительные ограничения. Это может несколько упростить ваш код, но за счет потери возможности остановить распространение и т. д. См. ограничения в документации: docs.jquery.com/Events/live#typefn - person tvanfosson; 01.09.2009
comment
Я, вероятно, должен был сказать, что проблема, для решения которой предназначены живые обработчики, заключается в применении обработчиков к элементам, которые добавляются/удаляются. Конечно, их можно применять и иначе. - person tvanfosson; 01.09.2009

arrow_upward
4
arrow_downward

Не уверен, знаете ли вы об этом или нет... Проверьте документацию по jquery на .live () функциональность. Таким образом, вы могли бы сделать что-то вроде этого.

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

И тогда вам не придется беспокоиться о классах, не существующих при загрузке документа. По мере изменения классов элементов они будут автоматически привязаны к ним.

person Anthony    schedule 01.09.2009
comment
о, это тоже выглядит интересно! - person Phill Price; 01.09.2009

arrow_upward
2
arrow_downward

Вы можете изменить свой код следующим образом

$(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;    
});
person Sanjeev Chauhan    schedule 13.06.2014
comment
Другое предложение .live теперь устарело. - person Joshua Mee; 31.08.2018

arrow_upward
0
arrow_downward

Вы также можете изменить обработчик кликов на обработчик кликов в реальном времени:

$(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'); 
        });
    });
person Contra    schedule 01.09.2009
comment
гах есть два пути - какой выбрать :С - person Phill Price; 01.09.2009