Question

我有一个名为“收藏夹”的小图标，当我点击它时，我调用一个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");
    });

基本上我想在每次点击时更改图标。但是，当我添加类（最喜欢的）时，从不调用喜欢的类的事件处理程序，它总是不受欢迎

我该怎么办？

谢谢

Answer 1

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

$('#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");
});

Answer 2

在动态添加元素上设置事件时，您需要委派事件。见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");
    });

用jquery交换类名

2 个答案: