jquery – Unbind and rebind click event inside the list

I have HTML list where items inserted dynamically from a database via JQuery Ajax with $.ajax() function.

I want to unbind every click event from the list when beforeSend() function started and rebind them back to every list item when ajax success function is called. This is what I’m trying to do.

$.ajax({
  url: 'php/myurl',
  type: 'POST',
  success: function(response){
    $json = jQuery.parseJSON(response);
    $.each($json, function(key, item){
      $("#list-ul")append('<li id="'+ item.id+ '">' + item.serviceName + '</li>');
      $("#" + item.id).click(function(){
          loadServiceData(item.id)
      });
    })
  }
});

function loadServiceData(id){
   $.ajax({
      url: 'php/loadurdata',
      type: 'POST',
      beforeSend: function(){
        $("#list-ul *").unbind('click');
      },
      success: function(){
         /* Here I want to rebind back all click event to the list items to  recall this function*/
      }
    });
}

What I am trying to do is disable click events on the list when ajax is running and re-enable them when ajax is success.

Read more here: Source link