Javascript HTML按钮单击不起作用

Question

I've created a login system using HTML, JavaScript, Ajax and PHP.

I'm trying to implement the log out function now, here's what I have:

First there is a div in my html, which says welcome to anyone on the site not logged in:

<div id="welcome" style="postion:absolute; top:0; float:right;">Welcome to SIK!!!!</div>

I then have a JavaScript function which is called when a user is logged in or registered to amend the div to say hi to the specific user, and show a log out button.

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

And then when the user clicks logout, in my main js file there is a function:

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

here is my main js file altogether:

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

});

So now you can see the order of the calls, and also the click function that is called for the logout button is:

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

}

As you can see I have and alert at the top of the last function I posted to show me if the function is actually being called.

My problem is when I click the logout button nothing happens. I also don't see the alert, thus the problem is occurring on the click.

Any help with this situation would be great.

Answer 1

That's because you create the logout button dynamically and AFTER the click handler is trying to attach itself to the element in your main js file. As a result, the handler doesn't find the #logout_but element and therefore doesn't attach to anything.

To fix that, you could use a delegate instead of a click handler:

Replace this:

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

with

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