Jquery 无法在AJAX请求上切换按钮单击事件 功能暂停更换（el、placementTag）{ $.ajax({ url:'/campaign/pausePlacement/'+campaignId+'/'+placementTag， 数据类型：“json”， 键入：“GET”， 成功：功能（数据）{ 如果（data.responsecode！=“1”）{ bootbox.alert（data.validationerror）； }否则{ el.html（“”）； el.off（'click'）。on（'click'，function（）{ 起始位置（el，位置标签）； }); } } }); } 功能启动位置（el，位置标签）{ $.ajax({ url:'/campaign/startPlacement/'+campaignId+'/'+placementTag， 数据类型：“json”， 键入：“GET”， 成功：功能（数据）{ 如果（data.responsecode！=“1”）{ bootbox.alert（data.validationerror）； }否则{ el.html（“”）； el.off（'click'）。on（'click'，function（）{ 暂停更换（el、placementTag）； }); } } }); }

例如，如果初始状态为暂停，则显示播放按钮。如果您点击播放按钮，它会将状态更改为播放，现在变成暂停按钮。但是现在，如果您点击暂停按钮，出于某种令人恼火的原因，它会发出另一个ajax请求，将状态更改为播放，然后发出后续请求，暂停放置

所以第一次点击，只有1个ajax请求。第二次单击，2个ajax请求。在第三次单击时，再次单击1。等等

为什么要这样做？我需要改变什么？谢谢

根据：

off（）

方法删除与

.on（）

附加的事件处理程序

但是您有通过内联

onclick=“…

属性设置的处理程序。因此，在第一次单击之后，您有一个内联

onclick=“…

和一个jQuery绑定的单击处理程序。首先用jQuery绑定单击处理程序

<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);
                });
            }
        }
    });     
}

或者，考虑到您现有的功能几乎相同，您可能可以将它们组合成如下内容：

$(document).ready(function() {
    $("a.pausebtn").click(function() {
        var $this = $(this);
        pausePlacement($this, $this.attr("data-placement"));
    });
    $("a.startbtn").click(function() {
        var $this = $(this);
        startPlacement($this, $this.attr("data-placement"));
    });
});

---

也就是说，将单击处理程序绑定到最初存在的

pausebtn

和

startbtn

中的任何一个。然后在该处理程序中，根据单击的项所属的类设置Ajax调用的URL，然后在

success

上切换这些类。

您可以演示如何调用这些函数吗？在顶部添加了PHP/HTML

$(document).ready(function() {
    $("a.pausebtn").click(function() {
        var $this = $(this);
        pausePlacement($this, $this.attr("data-placement"));
    });
    $("a.startbtn").click(function() {
        var $this = $(this);
        startPlacement($this, $this.attr("data-placement"));
    });
});

$(document).ready(function() {
    $("a.pausebtn,a.startbtn").click(function() {
       var $this = $(this),
           placementTag = $this.attr("data-placement");

       $.ajax({
          url: '/campaign/'
               + ($this.hasClass("pausebtn") ? 'pausePlacement' : 'startPlacement')
               + '/' + campaignId + '/' + placementTag,
          dataType: 'json',
          type: 'GET',
          success: function(data) {
             if(data.responsecode != '1') {
                bootbox.alert(data.validationerror);
             } else {
                $this.toggleClass('btnpause btnstart')
                     .find('i').toggleClass('elusive-pause elusive-start');
             }
          }
       });
    });
});