首页 文章

Javascript HTML按钮单击无法正常工作

提问于
浏览
1

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

}

正如你所看到的那样,我在最后发布的函数的顶部发出警告,告诉我函数是否实际被调用 .

我的问题是当我点击退出按钮时没有任何反应 . 我也没有看到警报,因此点击时出现问题 .

对这种情况的任何帮助都会很棒 .

1 回答

  • 1

    那'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找不到 #logout_but 元素,因此不附加任何东西 .

    要解决此问题,您可以使用委托而不是单击处理程序:

    替换这个:

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

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

相关问题