jquery - Unable to toggle button click event on AJAX request -

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

if initial state paused instance, play button displayed. if hit play button, changes state playing , becomes pause button. if hit pause button, maddening reason makes ajax request change state playing , makes subsequent request pause placement.

so first click, 1 ajax request. second click, 2 ajax requests. on third click, 1 again. , forth.

why doing , need change? thanks

according jquery documentation:

the off() method removes event handlers attached .on().

but have handlers set via inline onclick="... attributes. after first click have both inline onclick="... and jquery-bound click handler. bind click handlers jquery in first place.

<?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; ?> 

and then:

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

or, given existing functions almost identical, can combine them this:

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

that is, bind click handler whichever of pausebtn , startbtn exists initially. within handler set url ajax call according class clicked item has, on success toggle classes.