javascript - prevent a function running multiple times after calling it again from ajax -

i have been struggling find solution problem long time. (and have googled many times). i'm trying avoid same function running multiple times when recall after ajax call. i'll give simple example using following code:

i load list of users db using php:

while(some loop){     $users.='         <div>             <div>user name</div>             <div class="replace">replace user</div>             <div class="delete">delete user</div>         </div>     '; } 

and display them inside div:

<div class="user_wrap">     <?php echo $users; ?>     <div id="add_user"></div> </div> 

now on front end can delete or replace each user or add new user div run 3 functions on document ready:

$(document).ready(function(){     adduser();     deleteuser();     replaceuser(); });  function adduser(){     $("#add_user").on("click",function(){         //first load list of users select 1         $.post("url",{},function(response){             //add new user user wrap             deleteuser();             replaceuser();         });     }); }  function deleteuser(){     $(".delete").on("click",function(){         $.post("url",{},function(response){             //delete user         });     }); }  function replaceuser(){     $(".replace").on("click",function(){         $.post("url",{},function(response){             //replace user different user         });     }); } 

now problem comes when add new user using ajax have rerun both of deleteuser , replaceuser functions. thoes functions begin pile , can run multiple times in row. in cases harmless result of function in cases harms result of function , in adition doesnt take lot of system resourses? way able prevent using triggers setting global variable , doing thing like:

delteusertrigger = 0;  function deleteuser(){     if(delteusertrigger==1){return false;}     else{         delteusertrigger=1;         $(".delete").on("click",function(){             $.post("url",{},function(response){                 delteusertrigger==0;                 //delete user             });         });     } } 

but mehtod doesnt work expected gets function "stuck" many times if trigger didnt change, on click event stops responding.

i have read function closure in js prevent same function running multiple times didnt quit understand how implement ajax call. , useful in case or doing wrong here? appreciate here.

just use event delegation, , you'll have set event handlers once (when page loads):

function deleteuser(){     $(document).on("click", ".delete", function(){         $.post("url",{},function(response){             //delete user         });     }); } 

once that's been called, it'll work user stanzas whether there when page loaded or not. don't need after ajax completes.