0

これを機能させようとしていますが、うまくいきません。ここで私がやろうとしているのは、リンク (.hidepage) をクリックすると ajax が実行され、完了するとそのリンク名とクラス名が (> showpage に) 変更されることです。そして、機能していないのは、ショーページのリンクを再度クリックすると、再び非表示になります。

$('.hidepage').on('click', function(e){
var pageStatus = $(this).closest('tr').find('.pagestatus');
var button = $(this);
var pageID = $(this).attr('pageid');

$.ajax({
    type: 'POST',
    url: Jarvis.ajax_url + 'hidepage',
    data: { pageid: pageID },
    success: function(data)
    {
        console.log(data);
        pageStatus.html('<span class="label label-default">Hide page</span>');
    },
    complete: function()
    {
        button.removeClass('hidepage').addClass('showpage').html('Show page');
    },
    error: function(xhr, textStatus, error){
        console.log(xhr.statusText);
        console.log(textStatus);
        console.log(error);
    }
 });
});

また、反対のアクションの showpage クラスにも同じコードがあります。他のすべてが機能しています。pageStatus は変化しています。リンク名は変化していますが、アクションは変化していません。ご協力ありがとうございます。:)

4

1 に答える 1

1

クラス showpage は要素に動的に追加されます。したがって、イベント ハンドラーは .hidepage または .showpage ではなく、その親にバインドする必要があります。以下の例:

.showpage の親が #showPageDiv であるとします。

$('#showPageDiv').on('click', '.showpage', function() {
    //handle show page
});

同様に、.hidepage も動的に追加される可能性があるため、これを行います。

于 2013-09-29T15:17:51.840 に答える