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) お気に入りのクラスのイベントハンドラーが呼び出されることはなく、常に unfavorite になります

私は何をすべきか？

ありがとうございました

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 に答える