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

}

ご覧のとおり、最後に投稿した関数の上部にアラートが表示され、関数が実際に呼び出されているかどうかが示されます。

私の問題は、ログアウトボタンをクリックしても何も起こらないことです。また、アラートが表示されないため、クリック時に問題が発生しています。

この状況での助けは素晴らしいでしょう。

4

1 に答える 1

1

これは、ログアウトボタンを動的に作成し、クリックハンドラーがメインのjsファイルの要素に自分自身をアタッチしようとした後に作成するためです。その結果、ハンドラーは#logout_but要素を検出しないため、何にもアタッチしません。

これを修正するには、クリックハンドラの代わりにデリゲートを使用できます。

これを置き換えます：

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

と

$("#welcome").on("click", "#logout_but", ui.logout);
于 2013-03-20T23:23:16.533 に答える