Javascript HTML按钮点击不起作用

Question

我创建了一个使用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); 

}); 

所以，现在你可以看到呼叫的顺序，并且为注销按钮调用的点击功能是：

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'); 
     } 
    }) 

} 

正如你所看到的，我已经在我发布的最后一个函数的顶部看到并警示了该函数是否被实际调用。

我的问题是当我点击注销按钮没有任何反应。我也看不到警报，因此点击发生问题。

对这种情况的任何帮助都会很大。

Answer 1

这是因为您动态创建注销按钮，并且在点击处理程序尝试将自己附加到主js文件中的元素之后。因此，处理程序不会找到#logout_but元素，因此不会附加到任何内容。

为了解决这个问题，你可以使用，而不是一个单击处理程序委托：

替换此：

$("#logout_but").click(ui.logout); 

与

$("#welcome").on("click", "#logout_but", ui.logout);