Почему не срабатывает событие при клике?

Question

[entermix]

Есть материалы, которые пользователь может добавить в избранные, если материал добавлен, на сайте он отображается как:

<div class="fav-remove" title="Удалить закладку"></div>

Если нет, то соответственно:

<div class="fav-add" title="Добавить в закладки"></div>

При клике на блок, нужно сменить его класс, делаю так:

<script type="text/javascript">
<!--
    $('.fav-add').click(function() {
        $(this).removeClass('fav-add');
        $(this).addClass('fav-remove');
    });
    
    $('.fav-remove').click(function() {
        $(this).removeClass('fav-remove');
        $(this).addClass('fav-add');
    });
-->
</script>

Например если пользователь добавил материал в избранные, он жмет по блоку с классом fav-remove, чтобы удалить с закладок, т.е. 1 раз должна выполнится: $('.fav-remove').click(function() {});, а при втором клике $('.fav-add').click(function() {});, но все работает только для 1 клика, почему так проиходит?

Answer 1

[Trash]

$('body').on('mousedown', '.fav-add', function() {
        $(this).removeClass('fav-add');
        $(this).addClass('fav-remove');
    });
    
$('body').on('mousedown', '.fav-remove',  function() {
        $(this).removeClass('fav-remove');
        $(this).addClass('fav-add');
    });

Так как ваши классы переименовываются "вживую", то сначала стоит указывать элемент, который уже был создан при загрузке DOM'a. В моем примере это body :) Ну а потом метод 'On', в котором вписываем event, а после - ваш класс :)

Comments

[entermix]

Спасибо, работает :)

Answer 2

[wscms]

Потому что

$('.fav-add').on('click', function() {
});

Или

$('.fav-add').live('click', function() {
});