无法在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请求，将状态更改为播放，然后发出后续请求暂停放置。

所以第一次点击，只有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上切换类。