我已经用HTML、JavaScript、Ajax和PHP创建了一个登录系统。
我现在正在尝试实现注销功能,这是我所拥有的:
首先,在我的html中有一个div,表示欢迎网站上未登录的任何人:
<div id="welcome" style="postion:absolute; top:0; float:right;">Welcome to SIK!!!!</div>
然后我有一个JavaScript函数,当用户登录或注册时调用它来修改div以向特定用户打招呼,并显示注销按钮。
function show_logged_in(success)
{
var is_logged_in = success;
var dataString = {"reg":invalid, "login":invalid,"is_logged_in":is_logged_in};
$.ajax({
type:"POST",
url:"PHP/class.ajax.php",
data:dataString,
dataType:'JSON',
success: function(username) {
alert("User is shown");
user = username;
$('#welcome').html('<p>Hi ' + user + '</p><p><button id="logout_but"
type="button">Log Out</button></p>');
},
error: function() {
alert("ERROR in show_logged_in");
}
});
}
然后当用户点击登出,在我的主js文件中有一个函数:
$("#logout_but").click(ui.logout);
这是我的主要js文件:
$(document).ready(function(){
//----------Login/Register Gui --------------
$('#load-new').hide();
$('#reg').hide();
$('#login').hide();
//create new instance of gui class
var ui = new Gui();
//if login_but is clicked do ui.login function
$('#login_but').click(ui.login);
//if reg_but is clicked do ui.register function
$('#reg_but').click(ui.register);
//if login_sumbit button is clicked do ui.login_ajax function
$("#login_submit").click(ui.login_ajax);
$("#reg_submit").click(ui.register_ajax);
$("#logout_but").click(ui.logout);
});
现在您可以看到调用的顺序,并且为注销按钮调用的click函数为:
this.logout = function() {
alert("clicked");
var dataString = {"is_logged_out":invalid};
$.ajax({
type:"POST",
url:"PHP/class.logout.php",
data:dataString,
dataType:'JSON',
success: function(success){
alert("User is logged out");
$('#welcome').html('<p>Welcome to SIK</p>');
},
error: function() {
alert('ERROR in log out');
}
})
}
正如你所看到的,在我发布的最后一个函数的顶部有一个警告,告诉我函数是否真的被调用了。
我的问题是当我点击登出按钮什么都没有发生。我也没有看到警告,因此问题发生在点击上。
这是因为您动态地创建了注销按钮,并且在点击处理程序试图将自己附加到主js文件中的元素之后。因此,处理程序没有找到#logout_but
元素,因此没有附加到任何内容。
要解决这个问题,你可以使用委托而不是点击处理程序:
替换:
$("#logout_but").click(ui.logout);
$("#welcome").on("click", "#logout_but", ui.logout);