JQuery - 類更改未註冊

Question

我目前正在爲一個鍛鍊日誌放在一起的網站的過程。現在，我正在創建一個團隊管理員用來管理團隊中球員的頁面。爲了給你一個視覺的會員管理酒吧的樣子，我附上了以下圖片：

背景/ FILES

一些PHP後，呈現的HTML如下：

<div class="row"> 
    <div class="col-md-offset-1 col-md-3"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h3 class="panel-title">Members</h3> 
     </div> 
     <div class="panel-body"> 
     <div class="table-responsive"> 
     <table class="table table-hover table-condensed" id="table1"> 
      <tr style="vertical-align: middle;"> 
      <td style="text-align: left;">Matthew Gross</td> 
      <td style="text-align: right;"><a href="#"><span class="glyphicon glyphicon-envelope"></span></a>&emsp;<a href="#"><span class="glyphicon glyphicon-ban-circle del-member" member="1"></span></a>&emsp;<a href="#"><span class="glyphicon glyphicon-user admin-member" member="1"></span></a></td> 
      </tr> 
      <tr style="vertical-align: middle;"> 
      <td style="text-align: left;">Nud Nud</td> 
      <td style="text-align: right;"><a href="#"><span class="glyphicon glyphicon-envelope"></span></a>&emsp;<a href="#"><span class="glyphicon glyphicon-ban-circle del-member" member="3"></span></a>&emsp;<a href="#"><span class="glyphicon glyphicon-user n-admin-member" member="3"></span></a></td> 
      </tr> 
     </table> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

此外，我有一些JQuery和AJAX腳本來處理點擊圖標。在我的錯誤的情況下，我只專注於用戶的圖標，這與我的AJAX和JQuery處理，如下：

// AJAX Handler 
function sendAjax(req, body) 
{ 
    // Get group data via AJAX to PHP request 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else { 
     // code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
      console.log(xmlhttp.responseText); 
     } 
    } 

    xmlhttp.open("POST","manage.php",true); 
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    xmlhttp.send("req="+req+"&body="+body); 
} 

// Admin Management 
$(document).ready(function(e) { 
    $('.admin-member').click(function(e) { 
     var m_id = $(this).attr('member'); 
     $(this).toggleClass('admin-member n-admin-member'); 
     sendAjax("r-ad", m_id); 
    }); 
}); 

$(document).ready(function(e) { 
    $('.n-admin-member').click(function(e) { 
     var m_id = $(this).attr('member'); 
     $(this).toggleClass('n-admin-member admin-member'); 
     sendAjax("a-ad", m_id); 
    }); 
}); 

的問題

對於這兩種用戶，當我第一次點擊用戶圖標時，AJAX成功運行並且數據庫中的管理位發生更改。就CSS而言，您將在JQuery代碼中注意到，該類從n-admin-member正確更改爲admin-member，反之亦然。在UI方面，這看起來像是100％。但是，如果我再次單擊用戶圖標以更改管理員狀態，AJAX仍在執行上一個查詢。

例

1. NUD NUD是不是管理員（因此他的用戶圖標爲黑色）。
2. 單擊Nud Nud的圖標。
3. JQuery調用$('.n-admin-member').click(function(e)函數。
4. Nud Nud現在是管理員，他的班級已從 n-admin-member切換爲admin-member（他的圖標現在變綠了）。
5. Nud Nud的圖標再次點擊。
6. JQuery的應該調用$('.admin-member').click(function(e) 功能，由於類的NUD NUD的跨度的變化 admin-member。
7. INSTEAD$('.n-admin-member').click(function(e)函數被再次調用。

懷疑

我懷疑這是因爲jQuery是有點不承認當用戶圖標被點擊第一次有人（因此它仍然運行設爲管理員功能類的變化，而不是un-make admin函數）。使用開發工具，我能夠確認類的變化，但我仍然認爲這種變化不會在JQuery中註冊。

我很感激您的任何和所有洞察！我相信這是一個簡單的JQuery修復程序，但目前它正在逃避我。謝謝！:)

Answer 1

您需要使用event delegation來解決這個問題，在這種情況下：

$(document).ready(function(e) { 
    $('#table1').on('click', '.admin-member', function(e) { 
     var m_id = $(this).attr('member'); 
     $(this).toggleClass('admin-member n-admin-member'); 
     sendAjax("r-ad", m_id); 
    }); 
    $('#table1').on('click', '.n-admin-member', function(e) { 
     var m_id = $(this).attr('member'); 
     $(this).toggleClass('n-admin-member admin-member'); 
     sendAjax("a-ad", m_id); 
    }); 
}); 

與該類元素不存在原。