添加然后删除<p>

Question

我想在表单出现错误时在文本中添加<p> 。 我写了一些js代码，但现在不起作用。 我的问题是：如何添加文本，如果出现错误，请显示1800毫秒，然后添加然后删除此文本？

$(document).ready(function () {
    ........................
        error: function () {
            $('form').append("<p class='er-msg'></p>").text('Maximum upload size 50MB. Please try again');
            $('.er-msg').animate({ opacity: 0} , 1800);
            $('.er-msg').remove();   //don't work 
        }
    };
   ....................
});

我希望有人帮助我。

Answer 1

现在，您的动画耗时1800毫秒，据我了解，您希望在隐藏消息之前延迟一段时间。 所以你应该从这样的setTimeout开始

setTimeout(function () {
    $('.er-ms').animate({ opacity: 0} , 1800);
}, 1800);

jQuery animate具有第3个参数，该函数将在动画结束后调用。 然后，您可以添加它，使消息消失。

setTimeout(function () {
    $('.er-ms').animate({ opacity: 0} , 1800, function () {
        $(this).hide().remove();
    });
}, 1800);

将其放在error回调中的追加行之后，并去除最后两个，您应该很好。

Answer 2

另一种方法是创建<p>并将其设置为display: none则可以根据需要进行切换。

HTML：

<p class='er-msg'>Maximum upload size 50MB. Please try again</p>

CSS：

.er-msg {
  display: none
}

jQuery的：

error: function () {
            $('.er-msg').fadeIn("slow");
            setTimeout(function(){
               $('.er-msg').fadeOut("slow");
            }, 1800);
        }

作为个人建议，我可以将计时器调高一些，以适应那些阅读速度不快的人。 这样，您的错误消息对碰巧看到它的任何人都有效。

JSFIDDLE演示

Answer 3

实际的附录是否还在发生？

我怀疑不是因为您正在动态添加<p> 。

为了成功绑定到此，您将需要定位其包装器。

例如：

$('form').on(eventname, targetElement, function(){
 ....the behavior you want
});

您可以查看此博客文章以了解更多信息： http : //blog.ning-xia.com/accessing-dynamically-created-elements-with-jquery/

Answer 4

<p>的附录不起作用，这就是为什么您无法删除它的原因。 尝试这种方式：

   $(document).ready(function () {
        ........................
            error: function () {
                $('form').append("<p class='er-msg'></p>");
                $('.er-ms').text('Maximum upload size 50MB. Please try again');
                $('.er-ms').animate({ opacity: 0} , 1800);
                $('.er-ms').remove();   
            }
        };
       ....................
    });

Answer 5

简单的解决方案

这是一个示例，您如何执行此操作：

var errorMessage = 'test message';
$('#question-header').append(
    $(
        '<p class="er-msg">' + 
             errorMessage  +
        '</p>'
    ).animate(
        {opacity: 0},
        1800,
        function(){
            $(this).remove();
        }
    )
);

您可以在动画中调用在动画完成后运行的函数。 尝试在控制台的此页面上运行它。 请注意，使用此错误可以以不同顺序引发，并且它们都将显示正确的行为。 您可以通过简单的方式将动画和删除内容耦合到所有唯一的错误消息。

您的代码无法正常工作，因为应该在创建的元素上调用文本，而不是在添加元素的文本上调用文本。

合适的方式：

$('form').append($('<p class="er-msg"></p>').text('Maximum uplo...'));

但是我认为上面的示例更具可读性，抽象性和高性能。