首次加载页面时，JQuery FadeIn 在 Ajax Success 中不起作用

Question

第一次加载页面时，第一次调用 Ajax 时，FadeIn 在我的成功函数中不起作用。其他 Jquery 函数确实有效，但确实有效，即 AddClass、HTML、Delay、Hide。然而，一旦页面被加载，任何后续的 Ajax 调用 FadeIn 都可以工作……也就是说，直到页面被刷新，当 FadeIn 再次第一次不工作时。我究竟做错了什么 ？谢谢 ！

HTML

<div class="updated_comment"></div>

<button type="button" id="update_comment" class="btn btn-primary">ONLY Update Comments</button>

JQuery:

    $("#update_comment").click(function () {
    event.preventDefault();
    var comment = $(".edit_comment").val();
    var $id = $("#reference").val();
    $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type: "POST",
        url: 'update_comment/'+$id,
        data: {edit_comment:comment},
        success: function () {

            $(".updated_comment").addClass("alert alert-success");
             $(".updated_comment").html("The Comment Has Been Updated").fadeIn(1000).delay(1000).hide(2000);
        },
        error: function () {
            alert('there has been a system level error - please contact support')
        }
    });
});

Answer 1

我认为您必须在文档加载时触发点击功能。由于我们所有的效果都发生在点击事件中，因此它在页面加载时不起作用，除非您触发点击

在上述函数之前/之后将其添加到您的就绪函数中：

 $("#update_comment").trigger('click');

或在注册事件后立即调用 click 函数。

 $("#update_comment").click(function () {
    event.preventDefault();
    ......
  }).click();

Answer 2

调用文档准备好的代码。 您可以使用setTimeout 解决fadeIn -> delay -> fadeOut。

您还缺少alert 之后的分号。

HTML

<div class="updated_comment"></div>

JQuery：

$(document).ready(function(){

        $("#update_comment").click(function () {
        event.preventDefault();
        var comment = $(".edit_comment").val();
        var $id = $("#reference").val();
        $.ajax({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type: "POST",
            url: 'update_comment/'+$id,
            data: {edit_comment:comment},
            success: function () {

                $(".updated_comment").addClass("alert alert-success");

                 $(".updated_comment").html("The Comment Has Been Updated");
                 $(".updated_comment").fadeIn(1000);

                 setTimeout(function(){
                     $(".updated_comment").fadeOut(1000);
                 },1000);
            },
            error: function () {
                alert('there has been a system level error - please contact support');
            }
        });
    });
});