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

});

因此，現在您可以看到調用的順序，並且注銷按鈕所調用的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');
        }
    })

}

如您所見，我在發布的最后一個函數的頂部警告我，以告訴我該函數是否真正被調用。

我的問題是，當我單擊注銷按鈕時，什么都沒有發生。 我也沒有看到警報，因此點擊發生問題。

在這種情況下的任何幫助將是巨大的。

Answer 1

這是因為您是動態創建注銷按鈕的，並且在單擊處理程序嘗試將其自身附加到主js文件中的元素之后。 結果，該處理程序找不到#logout_but元素，因此未附加任何內容。

要解決此問題，您可以使用委托代替點擊處理程序：

替換為：

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

同

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