Question

我正在与一些Javascript合作。而且我似乎无法在我的代码中调用click函数。

$('#btn_login').click函数工作正常，但$('#btn_logout').click函数没有。

cshtml文件如下所示：

<form action="" method="post">
    <span id="test"></span>
    <div id="logged_in" class="btn-group login loggedIn" style="display:none;">
    </div>

    <div id="logged_out" class="loggedOut">
        <span id="login-error"></span>
        <span id="login-loadingText"></span>
        <div class="form-inline login loggedOut">
            <input type="text" name="username" id="login-username" placeholder="Brugernavn/email" value="" class="form-control" />
            <input type="password" name="password" id="login-password" placeholder="Password" class="form-control" />
            <button type="button" id="btn_login" class="btn btn-default"><span class="glyphicon glyphicon-user"></span> Login</button>
            <button type="submit" name="btn" id="login-register" value="Registrer" class="btn btn-default" data-toggle="modal" data-target="#form_register"><span class="icon-user-add"></span> Ny bruger</button>
        </div>
    </div>
</form>

<script type="text/javascript">
var profileShownOnce = false;

$(document).ready(function () {
    $('#btn_logout').click(function () {
        logOut();
    });

    $('#btn_login').click(function () {
        var loadingId = "#login-loadingText";
        var span_error = $("#login-error");
        var username = $("#login-username").val();
        var password = $("#login-password").val();

        showLoadingText(loadingId);

        if (logIn(username, password)) {
            hideLoadingText(loadingId);
        } else {
            hideLoadingText(loadingId);
            span_error.html("Brugernavne eller password er forkert.");
        };
    });

    var $input = $('#login-username, #login-password'),
    $submit = $('#login-submit');

    function checkEmpty() {
        return $input.filter(function () {
            return !$.trim(this.value);
        }).length === 0;
    }

    $input.on('keyup blur', function () {
        $submit.prop("disabled", !checkEmpty());
    }).blur();

    toggleLogIn();
});
</script>

并且js文件如下所示：

function toggleVisible(loggedIn) {
var div1 = $(".loggedOut");
var div2 = $(".loggedIn");

if (loggedIn) {
    getProfile();
    div1.hide();
    div2.show();
} else {
    div1.show();
    div2.hide();
};
};

function toggleLogIn() {
$.getJSON("/User/GetJson_IsLoggedIn", null, function (data) {
    if (data) {
        getProfile();
        toggleVisible(true);
    } else {
        toggleVisible(false);
    };
});
};

function logOut() {
$.getJSON("/User/GetJson_Logout", null, function (data) {
    toggleVisible(false);
});
};

function logIn(username, password) {
$.getJSON("/User/GetJson_Login", {username: username, password: password}, function (data) {
    if (data) {
        toggleVisible(true);
        return true;
    } else {
        return false;
    };
});
};

function getProfile() {
var div = $("#logged_in");
$.getJSON("/User/GetJson_WhoIsLoggedIn", null, function (data) {
    printProfile(div, data);
});
};

function printProfile(div, item) {
if (!profileShownOnce) {
    profileShownOnce = true;
    var html = "<a href='#' class='dropdown-toggle no-shadow' data-toggle='dropdown'>" + item.profil.firstname + " " + item.profil.lastname + " <span class='caret'></span></a>" +
    "<ul class='dropdown-menu'>" +
    "<li>" +
    "<a href='~/Account/Profil?id=" + item.profil._id + "'>Profil</a>" +
    "</li>";

    if (item.rights.name == "Administrator") {
        html += "<li>" +
            "<div class='line-separator'></div>" +
            "</li>" +
            "<li>" +
            "<a href='~/Admin/User_List'>Bruger liste</a>" +
            "</li>";
    }

    html += "<li>" +
        "<button type='button' id='btn_logout' class='btn btn-default'><span class='glyphicon glyphicon-user'></span> Log ud</button>" +
        "</li>" +
        "</ul>";

    div.append(html);

    $('.dropdown-toggle').dropdown();
}
};

Answer 1

如果在用户登录后动态地将#btn_logout按钮添加到dom，则可以使用：

$(document).on('click', '#btn_logout', function(){
    logOut();
});

按钮点击功能不起作用而另一个功能不起作用

1 个答案: