添加第二個點擊事件到一個函數停止第一個工作

Question

我在下面的函數initUsers（），有兩個幾乎相同的點擊事件，一個用於ban-btn，另一個用於admin-btn。 ban-btn的點擊事件只在我爲admin-btn添加click事件之前有效。通過添加admin-btn的點擊事件，當我點擊ban-btn時發生的唯一事情是頁面跳轉了一下。 function initUsers中如何設置第二次點擊事件有問題嗎？

HTML

<ul id="users-container" class="users admin"> 
    <!-- BEGIN users --> 
    <div class="users-box" data-uid="{users.uid}" data-admin="{users.administrator}" data-username="{users.username}" data-banned="{users.banned}"> 
     <a href="/user/{users.userslug}"> 
      <img src="{users.picture}" class="img-thumbnail"/> 
     </a> 
     <br/> 
     <a href="/user/{users.userslug}">{users.username}</a> 
     <br/> 
     <div title="reputation"> 
      <i class='fa fa-star'></i> 
      <span id='reputation'>{users.reputation}</span> 
     </div> 
     <div title="post count"> 
      <i class='fa fa-pencil'></i> 
      <span id='postcount'>{users.postcount}</span> 
     </div> 

     <div> 
      <a href="#" class="btn btn-default ban-btn">Ban</a> 
     </div> 
     <div> 
      <a href="#" class="btn btn-default admin-btn">Make Admin</a> 
     </div> 

的javascript：

function initUsers() { 

    updateUserButtons(); 

    $('#users-container').on('click', '.ban-btn', function() { 
     var banBtn = $(this); 
     var isAdmin = isUserAdmin(banBtn); 
     var isBanned = isUserBanned(banBtn); 
     var parent = banBtn.parents('.users-box'); 
     var uid = getUID(banBtn); 

     if (!isAdmin) { 
      if (isBanned) { 
       socket.emit('api:admin.user.unbanUser', uid); 
       banBtn.removeClass('btn-warning'); 
       parent.attr('data-banned', 0); 
      } else { 
       bootbox.confirm('Do you really want to ban "' + parent.attr('data-username') + '"?', function(confirm) { 
        if (confirm) { 
         socket.emit('api:admin.user.banUser', uid); 
         banBtn.addClass('btn-warning'); 
         parent.attr('data-banned', 1); 
        } 
       }); 
      } 
     } 

     return false; 
    }); 

    $('#users-container').on('click', '.admin-btn', function() { 
     var adminBtn = $(this); 
     var isAdmin = isUserAdmin(adminBtn); 
     var parent = adminBtn.parents('.users-box'); 
     // var isBanned = isUserBanned(adminBtn); 
     var uid = getUID(adminBtn); 


      if (!isAdmin)) { 
       socket.emit('api:admin.user.makeAdmin', uid); 
       adminBtn.attr('value', 'UnMake Admin').html('Remove Admin'); 
       parent.attr('data-admin', 1); 

      } else { 
       bootbox.confirm('Do you really want to remove this user as admin "' + parent.attr('data-username') + '"?', function(confirm) { 
        if (confirm) { 
         socket.emit('api:admin.user.removeAdmin', uid); 
         adminBtn.attr('value', 'Make Admin').html('Make Admin'); 
         parent.attr('data-admin', 0); 

        } 
       }); 
      } 


     return false; 
    }); 

} 

Answer 1

添加event.preventDefault();這兩個功能。

像這樣

$('#users-container').on('click', '.ban-btn', function(event) { 
    event.preventDefault(); 

    ... 
}