Почему не добавляется один конкретный класс через .toggleClass?

Question

[istasiik]

Вот код. По нажатию на первую подключаются классы, которые убирают один див и включают второй. При нажатии на вторую - наоборот. Так вот, после нажатия второй этот див пропадает, но нужный не появляется. Вот js:

<script>
$(document).ready(function(){
$( "#anm" ).click(function() {
$(".forms-block").removeClass( "animated bounceIn" );
  $(".forms-block").toggleClass( "animated zoomOut" );
});
});
</script>
    
<script>
$(document).ready(function(){
$( "#anm" ).click(function() {
  $("#bounce").removeClass( "animated zoomOut" );  
  $("#bounce").toggleClass( "animated bounceIn" );
});
});
</script>
    
<script>
$(document).ready(function(){
$( "#anm2" ).click(function() {
    $(".forms-block").removeClass( "animated zoomOut" );
  $(".forms-block").toggleClass( "animated bounceIn" );
});
});
</script>
    
<script>
$(document).ready(function(){
$( "#anm2" ).click(function() {
    $("#bounce").removeClass( "animated bounceIn" );
  $("#bounce").toggleClass( "animated zoomOut" );
});
});
</script>

Сами css анимации рабочие 100%, это проверено. Взяты отсюда: daneden.github.io/animate.css

P.S проблему решил. Решение в коде.

Answer 1

[Anton Kalashnikov]

<script>
$(document).ready(function(){
$( "body" ).delegate( "#anm", "click", function() {
  $(".forms-block").toggleClass( "animated zoomOut" );
});
});
</script>

Отредактировал

Comments

[istasiik]

то есть везде заменить .click на .on?

[Anton Kalashnikov]

да, on отслеживает все события в dom, в первом параметре нужно указать тип события, в вашем случае это click

[istasiik]

@kalashnikau не -а, не сработало. Все точно так же

[Anton Kalashnikov]

@istasiik обновил код, с deligate точно должно работать

[istasiik]

@kalashnikau смешно, но все равно то же самое. я попробовал добавить ко второй кнопке строки с .toggleClass из первой (к первому скрипту второй кнопки строку из первого скрипта, ко второму из второго), что бы поменять состояние .toggleClass. Это срабатывает, но только в первый раз. Потом если пройтись по очереди по кнопкам он не сработает правильно. В следующий - сработает. И так бесконечно.

[Anton Kalashnikov]

@istasiik поясните целиком что нужно реализовать, я у себя попробую накидать, тогда смогу точно сказать в чем причина, так как не факт что именно
событие не срабатывает.

[istasiik]

jsfiddle.net/9qewgoxc/3 вот я попробовал показать это тут. Только анимация вообще неправильно тут работает. По клику на первую кнопку bounce появляется, а forms-block пропадает. По второй наоборот

[istasiik]

@kalashnikau все, решил проблему

[Anton Kalashnikov]

@istasiik опубликуйте решение, что бы если вдруг кто будет искать, что бы был ответ.

[istasiik]

@kalashnikau ок