0 
<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。等等。

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

4

1 回答 1

2

根据jQuery 文档：

该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切换类。

于 2013-07-31T21:03:30.787 回答