Question

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

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

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

让我的注销功能识别AJAX加载注销按钮的最佳方法是什么？我最初的想法是在命令中心div上使用mouseover事件来封装我的注销功能，以便在用户登录并将光标移动到加载了AJAX的命令中心之后，该函数会根据该命令查找注销DIV ID。当前的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
});

引用加载了AJAX的DIV ID

2 个答案: