javascript - jQuery - Using .on and .off for event listeners with nameless functions -

i trying utilize .off() in js handle turning off clicking during ajax request , turning on once done. know code use ajaxstart().ajaxstop().

what running .on('click') uses nameless function work. i.e.: $(document).on('click', '-enter-delegated-elements-here-', function (e) { // click stuff here, click run ajax request });

this creates problem when when, after have turned off event listeners .off ($(document).off('click', '**');), have turn them on. unfortunately, plain $(document).on('click', '-enter-delegated-elements-here-'); not work.

to demonstrate point have created this fiddle.

(a snippet here:)

$('add').on('click', '#add'); //here's zinger!!! 

var = 0;  $('#add span').text(i);  $(document).on('click', '#add', function(e) {    $('#catcher').append(i);    += 1;    $('#add span').text(i);  });  $(document).on('click', '#stop', function(e) {    if (!$(document).off('click', '#add')) {      $(document).off('click', '#add');      return;    }    $(this).text('add 5 , re-enable catching');    += 5;    $('#add span').text(i);    $('add').on('click', '#add'); //here's zinger!!!  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="add">    add catcher: <span></span>  </button>  <button id="stop">    stop catching  </button>  <h2>catcher:</h2>  <div id="catcher"></div>

(while there no ajax request, principle still same)

i aware create function handle this, i.e.:

function forclicks(e) {   // click stuff here, click run ajax request } $(document).on('click', '-enter-delegated-elements-here-', forclicks(e)); 

however, becomes less practical make bunch of functions (like if end having multiple click handlers - to handle debouncers , whatnot, etc.) , clutters global space when use nameless functions instead.

does know how can turn on event handler uses nameless functions, using .on() (after has been turned off .off())? there way or require type of js code (i aware .toggle() not work anymore, maybe it?).

there @ least 3 solutions this:

1. disable buttons during ajax operations. has useful effect of telling user they're not available during time.

2. use flag tell handlers not anything, e.g.:

   var disableclicks = 0; 

   then increment when start ajax call, , decrement when call finishes (including if fails).

   then in handlers:

   if (disableclicks) {     return; } 

3. use named functions, mentioned.

   i aware create function handle this, i.e.:

   however, becomes less practical make bunch of functions (like if end having multiple click handlers - handle debouncers , whatnot, etc.) , clutters global space when use nameless functions instead.

   there's no need make them globals. make them in scope you're using them. can wrap them nice tidy controller object.

example #1 (disabling button):

var = 0;  $('#add span').text(i);  $(document).on('click', '#add', function(e) {    $('#catcher').append(i);    += 1;    $('#add span').text(i);  });  $(document).on('click', '#stop', function(e) {    $("#add").prop("disabled", true);    settimeout(function() {      $(this).text('add 5 , re-enable catching');      += 5;      $('#add span').text(i);      $("#add").prop("disabled", false);    }, 1000);  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="add">    add catcher: <span></span>  </button>  <button id="stop">    stop catching  </button>  <h2>catcher:</h2>  <div id="catcher"></div>

example #2 (a flag/counter):

var disableclicks = 0;  var = 0;  $('#add span').text(i);  $(document).on('click', '#add', function(e) {    if (disableclicks) {      return;    }    $('#catcher').append(i);    += 1;    $('#add span').text(i);  });  $(document).on('click', '#stop', function(e) {    ++disableclicks;    settimeout(function() {      $(this).text('add 5 , re-enable catching');      += 5;      $('#add span').text(i);      --disableclicks;    }, 1000);  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="add">    add catcher: <span></span>  </button>  <button id="stop">    stop catching  </button>  <h2>catcher:</h2>  <div id="catcher"></div>

example #3 (controller object):

var addcontroller = {    handler: function(e) {      $('#catcher').append(i);      += 1;      $('#add span').text(i);    },    enable: function() {      $(document).on('click', '#add', addcontroller.handler);    },    disable: function() {      $(document).off('click', '#add', addcontroller.handler);    }  };  addcontroller.enable();    var = 0;  $('#add span').text(i);  $(document).on('click', '#stop', function(e) {    addcontroller.disable();    settimeout(function() {      $(this).text('add 5 , re-enable catching');      += 5;      $('#add span').text(i);      addcontroller.enable();    }, 1000);  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="add">    add catcher: <span></span>  </button>  <button id="stop">    stop catching  </button>  <h2>catcher:</h2>  <div id="catcher"></div>