поменять имена классов с помощью jquery [duplicate]

Question

поменять имена классов с помощью jquery [duplicate]

0

У меня есть маленький значок под названием "Избранное", и когда я нажимаю на него, я вызываю обработчик события jquery, чтобы изменить значок и изменить имя класса.

Но когда я нажимаю на него снова, он не переходит к обработчику события класса, который я добавил к нему, он возвращается к исходному обработчику событий

Это значок

<input style="float:right" type="image" name="unfavorite" id="unfavorite" class="unfavorite" src="images/unfavorite.png" />

и мой jquery:

    $('.unfavorite').click(function()
    {
        $(this).removeClass('unfavorite');
        $(this).addClass("favorite");
        $(this).attr("src","images/favorite.png");
    });

    $('.favorite').click(function()
    {
        $(this).removeClass('favorite');
        $(this).addClass("unfavorite");
        $(this).attr("src","images/unfavorite.png");
    });

так что в основном я хочу менять иконку каждый раз нажимаем. Но когда я добавляюClass (любимый), обработчик событий для любимого класса никогда не вызывается, он всегда идет к неприглядному

Что мне делать?

Спасибо

beckinho 21 окт. 2013, в 21:24

Источник

0

Вы привязали обработчик события к элементу. Изменение класса элемента не определяет, какой обработчик был связан с ним. Вам нужно использовать делегирование событий, чтобы получить этот эффект.
Jason P 21 окт. 2013, в 18:58
0

Я новичок в веб-разработке, поэтому я не знаю, что это значит и как это исправить.
beckinho 21 окт. 2013, в 18:59
0

api.jquery.com/toggleClass
j08691 21 окт. 2013, в 19:00
2

Прочитайте документацию по on() , особенно часть о прямых и делегированных событиях, или поищите в SO какие-либо из ежедневных подобных вопросов.
Jason P 21 окт. 2013, в 19:00

Показать ещё 2 комментария

Теги:

jquery

2 ответа

Ещё вопросы

Вы привязали обработчик события к элементу. Изменение класса элемента не определяет, какой обработчик был связан с ним. Вам нужно использовать делегирование событий, чтобы получить этот эффект.
Я новичок в веб-разработке, поэтому я не знаю, что это значит и как это исправить.
Прочитайте документацию по on() , особенно часть о прямых и делегированных событиях, или поищите в SO какие-либо из ежедневных подобных вопросов.

Gaurav · Answer 1 · 2013-10-21T16-57-00.000Z

Вам не обязательно динамически связывать событие. Если утверждения класса элемента могут работать нормально.

$('#unfavorite').click(function()
{
    $(this).toggleClass('unfavorite');
    $(this).toggleClass("favorite");
    if ($(this).hasClass("favorite"))
        $(this).attr("src","images/favorite.png");
    if ($(this).hasClass("unfavorite"))
        $(this).attr("src","images/unfavorite.png");
});

Большое спасибо за вашу помощь @Gaurav

TJ. · Answer 2 · 2013-10-21T17-43-00.000Z

Вы должны делегировать событие при настройке событий на динамически добавленные элементы. См. Http://api.jquery.com/on/. Посмотрите пример ниже:

$('body').on('click', '.unfavorite', function()
    {
        $(this).removeClass('unfavorite');
        $(this).addClass("favorite");
        $(this).attr("src","images/favorite.png");
    });

$('body').on('click', '.favorite', function()
    {
        $(this).removeClass('favorite');
        $(this).addClass("unfavorite");
        $(this).attr("src","images/unfavorite.png");
    });