引用AJAX加载的DIV ID

Question

我在我的网站上有一个“命令中心”栏，它有一个登录/注销按钮，一个我的帐户按钮和一个消息按钮。如果用户未登录，则命令中心仅显示登录按钮。如果用户已登录，则命令中心将显示注销，我的帐户和消息按钮。

我使用jQuery AJAX在用户登录或注销时刷新命令中心。因此，当用户登录时，他/她的信息会发布到php页面，并且回调函数将刷新命令中心。我有另一个jQuery AJAX函数，当它检测到注销按钮（只出现在用户登录后）时，它会发布到一个php页面，以便将用户注销。

由于注销按钮是通过AJAX加载的，我的注销功能在初始页面下载时加载，注销功能不响应注销按钮上的点击，即使该功能引用注销按钮的ID。

让我的注销功能识别AJAX加载的注销按钮的最佳方式是什么？我最初的想法是在命令中心div上使用mouseover事件来封装我的注销功能，以便在用户登录并将光标移到装载了AJAX的命令中心后，该功能将根据目前的HTML。缺点是每次用户悬停在指挥中心时都会调用该函数，即使他们不想注销。

有没有更直接的解决方案呢？

Answer 1

你想要做的是使用jQuery的on()函数。

的代码可能看起来像：

$('body').on('click', '#log-out-button-id', function(){ 
    // logout code 
}); 

本质上讲，你附加事件到你的页面上的元素不会发生变化。出于性能原因，您应该使用最接近的稳定父元素。 （在你的情况这可能是'#command-center'。

Answer 2

您可以在body使用jQuery .on功能（或者，更窄，在您的命令中心），通过你的注销按钮的选择。通过这种方式，将执行每当按钮存在 - 无论是已经存在的或将来补充说：

$("body").on("click", "#logout", function(event){ 
    // Your code 
});