添加然后刪除<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...'));

但是我認為上面的示例更具可讀性，抽象性和高性能。