jquery - AJAX リクエストでボタン クリック イベントを切り替えることができません

Question

<div class=" pull-right">
    <?php if ($placement['placementStatus'] == Campaign::STATUS_IN_PROGRESS): ?>
    <a class="pausebtn btn btn-small" onclick="pausePlacement($(this), '<?=$placement['placementTag']?>');" href="#"><i class="elusive-pause"></i></a>
    <?php else: ?>
    <a class="startbtn btn btn-small" onclick="startPlacement($(this), '<?=$placement['placementTag']?>');" href="#" ><i class="elusive-play"></i></a>
    <?php endif; ?>
    <a class="trashbtn btn btn-small" onclick="deletePlacement($(this), '<?=$placement['adId']?>');" href="#"><i class="elusive-trash"></i></a>
</div>

function pausePlacement(el, placementTag) {
    $.ajax({
        url: '/campaign/pausePlacement/' + campaignId + '/' + placementTag,
        dataType: 'json',
        type: 'GET',
        success: function(data) {
            if(data.responsecode != '1') {
                bootbox.alert(data.validationerror);
            } else {
                el.html('<i class="elusive-play">');
                el.off('click').on('click', function() {
                    startPlacement(el, placementTag);
                });
            }
        }
    });     
}

function startPlacement(el, placementTag) {
    $.ajax({
        url: '/campaign/startPlacement/' + campaignId + '/' + placementTag,
        dataType: 'json',
        type: 'GET',
        success: function(data) {
            if(data.responsecode != '1') {
                bootbox.alert(data.validationerror);
            } else {
                el.html('<i class="elusive-pause">');
                el.off('click').on('click', function() {
                    pausePlacement(el, placementTag);
                });
            }
        }
    });     
}

たとえば、初期状態が一時停止の場合、再生ボタンが表示されます。再生ボタンを押すと、状態が再生に変わり、一時停止ボタンになります。しかし、一時停止ボタンを押すと、なんらかの理由で、状態を再生中に変更する別の ajax リクエストが作成され、その後、プレースメントを一時停止するリクエストが作成されます。

したがって、最初のクリックで ajax リクエストは 1 つだけです。2 回目のクリック、2 つの ajax リクエスト。3 回目のクリックで、再び 1 になります。などなど。

なぜこれを行うのですか?何を変更する必要がありますか? ありがとう