Question

我正在创建一个工作正常的ajax帖子请求。然而，为了使其更具吸引力，我试图实施，以便当用户点击#sign_in时，它将在请求进行时更改文本。如果它导致错误，将显示一条消息。此消息将在几秒钟后自动删除。但是，如果你点击.close，它会强行关闭。然而，问题是以下不起作用：

$(".alert a").click(function(e) {
    $('.alert').fadeOut();
});

点击.close时没有任何反应。除此之外，这也不起作用。

$('#sign_in').val('Logger ind...');

完整代码

<form id="sign_in">
        <div class="form-group">
            <input type="text" name="username" id="username" class="form-control" placeholder="Email">
        </div>
        <div class="form-group">
            <input type="password" name="password" id="password" class="form-control" placeholder="Kodeord">
        </div>
        <a href="#">
            <small>Forgot password?</small>
        </a>
        <div class="form-group text-center add_top_20">
            <input class="btn_1 medium" id="sign_in" type="submit" value="Log ind">
            <input type="hidden" name="next" value="{{ next }}" />
        </div>
</form>

<div class="alert alert-error alert-danger" style="display: none;">
    <a class="close" href="#">×</a>
    Invalid email or password. Try clicking 'Forgot Password' if you're having trouble signing in.
</div>

jquery的

$("#sign_in").submit(function (event) {
    // Change sign in button text
    $('#sign_in').val('Logger ind...');

    // post request
    event.preventDefault();
    var username = $('#username').val();
    var password = $('#password').val();
    $.ajax({
        url: "/account/login/auth/",
        type: "POST",
        dataType : 'json',
        contentType: 'application/json',
        data: {
            'username': username,
            'password': password
        }, success: function (data) {

            if (data.success) {
                alert('success');
            } else {
                showAlert()
            }
            // Change sign in text back
            $('#sign_in').val('Log ind');
        }, error: function(error){
            // Change sign in text back
            $('#sign_in').val('Log ind');
        }
    });
});

function showAlert(){
    if(!$('.alert').is(':visible'))
    {
        $('.alert').fadeIn()
        $('.alert').delay(4000).fadeOut()
    }
}
$(".alert a").click(function(e) {
    $('.alert').fadeOut();
});

所有这些都包含在$(document).ready(function () {

中

Answer 1

嗯，您的活动正在启动，但您需要使用clearQueue才能再次启动fadeOut动画，从而中断前一个动画。

$(".alert a").click(function(e) {
   $('.alert').clearQueue();
   $('.alert').fadeOut();
});

Answer 2

更改您的表单id或提交按钮id并将:visible更改为:hidden

function showAlert(){
        if($('.alert').is(':hidden'))
        {
            $('.alert').fadeIn()
            $('.alert').delay(4000).fadeOut()
        }
    }

我在这里更改了'id'

<form id="sign_in_form">
        <div class="form-group">
            <input type="text" name="username" id="username" class="form-control" placeholder="Email">
        </div>
        <div class="form-group">
            <input type="password" name="password" id="password" class="form-control" placeholder="Kodeord">
        </div>
        <a href="#">
            <small>Forgot password?</small>
        </a>
        <div class="form-group text-center add_top_20">
            <input class="btn_1 medium" id="sign_in" type="submit" value="Log ind">
            <input type="hidden" name="next" value="{{ next }}" />
        </div>
</form>

<div class="alert alert-error alert-danger" style="display: none;">
    <a class="close" href="#">×</a>
    Invalid email or password. Try clicking 'Forgot Password' if you're having trouble signing in.
</div>

的jQuery

$("#sign_in_form").submit(function (event) {
    // Change sign in button text
    $('#sign_in').val('Logger ind...');

    // post request
    event.preventDefault();
    var username = $('#username').val();
    var password = $('#password').val();
    $.ajax({
        url: "/account/login/auth/",
        type: "POST",
        dataType : 'json',
        contentType: 'application/json',
        data: {
            'username': username,
            'password': password
        }, success: function (data) {

            if (data.success) {
                alert('success');
            } else {
                showAlert()
            }
            // Change sign in text back
            $('#sign_in').val('Log ind');
        }, error: function(error){
            // Change sign in text back
            $('#sign_in').val('Log ind');
        }
    });
});

function showAlert(){
    if($('.alert').is(':hidden'))
    {
        $('.alert').fadeIn()
        $('.alert').delay(4000).fadeOut()
    }
}
$(".alert a").click(function(e) {
    $('.alert').clearQueue();
    $('.alert').fadeOut();
});

val和fadeOut不工作点击

2 个答案: