jQuery在5秒后将onclick隐藏后显示div

Question

Hey so I have a div that I want to replaceWith some text after clicking on the button and then re-show the same hidden text after 5 seconds. I am stuck on the part where I need to re-show it. I hid the div with the onclick function and appended some text but after a couple seconds I would like to re-show the original text.

here is the link that I need to change text onclick and then after 5 seconds show the ORIGINAL text...

originally the text says "add to calendar", upon clicking it, it should change to "calendar updated" and then after 5 seconds change back to "add to calendar".

<div class="resSubmitAction download resDetailsButton">
    <a href="javascript:void(0);">
</div>
<div class="calText"><p>add to calendar</p></div></a>
</div>

Jquery:

$(document).ready(function () {
     $(".resSubmitAction").click(function () {
         $(".calText > p").replaceWith("Calendar Updated");
     });
 });

Answer 1

Make use of the setTimeout function. Fiddle

$("#clickme").click(function(){
    var elem = $(this);
    setTimeout(function(){
        elem.hide();        
    }, 5000);
});

Answer 2

In the code that you provided, the click event is not attached correctly, if you click 'add to calendar' it doesn't trigger the event.

You can use the setTimeout function to call any function after certain time delay, this is your code with the setTimeout implemented. Fiddle

 $(".calText").click(function () {
     var originalText = $(".calText > p").text();
     $(".calText > p").text("Calendar Updated");

     setTimeout(function(){ 
             $(".calText > p").text(originalText) 
     }, delayTime);

     //Just a little timer I added
     triggerTimer();
 });