Question

我目前正在整理一个用于锻炼日志的网站。现在，我正在创建团队管理员将用于管理团队中的玩家的页面。为了让您了解会员管理栏的外观，我附上以下照片：

Member Dashboard

背景/文件

在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脚本来处理点击图标。在我的bug的情况下，我只专注于用我的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仍在执行上一个查询。

示例

Nud Nud不是管理员（因此他的用户图标为黑色）。
点击Nud Nud的图标。
JQuery调用$('.n-admin-member').click(function(e)函数。
Nud Nud现在是一名管理员，他的班级已经开始了 n-admin-member至admin-member（他的图标现在为绿色）。
再次点击Nud Nud的图标。
JQuery 应该调用$('.admin-member').click(function(e) 功能，因为Nud Nud的跨度改变了类 admin-member。
INSTEAD 再次调用$('.n-admin-member').click(function(e)函数。

怀疑

我怀疑这是因为JQuery在某种程度上无法识别第一次点击用户图标时所做的类更改（因此它仍然运行make admin功能，而不是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);
    });
});

由于该类的元素最初不存在。

JQuery - 未注册类更改

1 个答案: