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");
    });

所以基本上我想在每次点击时更改图标。但是当我 addClass(favorite) 最喜欢的类的事件处理程序永远不会被调用时，它总是去不喜欢

我应该怎么办？

谢谢你

4

2 回答 2

1

您实际上不必动态绑定事件。元素类的 if 语句可以正常工作。

$('#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");
});
于 2013-10-21T19:01:31.127 回答
0

在动态添加的元素上设置事件时，您需要委托该事件。请参阅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");
    });
于 2013-10-21T19:02:07.223 回答