javascript - jQuery对象引用问题

Question

function startCampaign(index, campaign_id) {
    var btn = $('#toggleStateBtn' + index);
    btn.html('<i class="icofont-pause"></i>');
    btn.removeClass('btn-success');
    btn.addClass('btn-warning');
    btn.attr('title', 'Pause this campaign');
    btn.width('9px');

    // Start campaign
    $.ajax({
        url:    '/campaign/startCampaign/' + campaign_id,
        type:   'POST',
        success: function(data){
            // Reflect the new state in status column
            btn.html(data);
        }
    });
}

function pauseCampaign(index, campaign_id) {
    var btn = $('#toggleStateBtn' + index);
    btn.html('<i class="icofont-play"></i>');
    btn.removeClass('btn-warning');
    btn.addClass('btn-success');
    btn.attr('title', 'Run this campaign');
    btn.width('9px');

    // Pause campaign
    $.ajax({
        url:    '/campaign/pauseCampaign/' + campaign_id,
        type:   'POST',
        success: function(data){
            // Reflect the new state in status column
            btn.html(data);
        }
    });
}

出于某种原因，这导致了奇怪的行为。如果你在所有地方都用 btn 替换，$('#toggleStateBtn' + index)那么一切正常。

我的猜测是，例如，如果您首先调用 startCampaign() 然后调用 pauseCampaign() 旧的 btn 引用将更改为新的。但我不确定。

想法？

Answer 1

没关系，我是个白痴，btn.html(data) 中的 btn 实际上是一个不同的控件。我是在盲目地替换。看来我今天早上需要多喝一剂咖啡因。