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请求，要求将状态更改为播放，然后再发出暂停放置的请求。

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

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

Answer 1

根据jQuery documentation：

off()方法删除了附加.on()的事件处理程序。

但是您通过内联onclick="...属性设置了处理程序。因此，在第一次单击后，您同时拥有内联onclick="... 和 jQuery绑定的单击处理程序。首先用jQuery绑定点击处理程序。

<?php if ($placement['placementStatus'] == Campaign::STATUS_IN_PROGRESS): ?>
<a class="pausebtn btn btn-small" data-placement="<?=$placement['placementTag']?>"
   href="#"><i class="elusive-pause"></i></a>
<?php else: ?>
<a class="startbtn btn btn-small" data-placement="<?=$placement['placementTag']?>"
   href="#" ><i class="elusive-play"></i></a>
<?php endif; ?>

然后：

$(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');
             }
          }
       });
    });
});

也就是说，将点击处理程序绑定到最初存在pausebtn和startbtn中的任何一个。然后在该处理程序中根据所单击的项具有的类设置Ajax调用的URL，然后在success上切换类。

无法在AJAX请求上切换按钮单击事件

1 个答案: