jquery fadeOut on future element

Question

is there posibility to apply jquery fadeOut on element which will be inserted into DOM later via ajax? I can apply clasic event via .on, but not sure how to make it with element ready.

    $(document).on('ready','.flash',function(){
    $('.flash').delay(200).fadeOut();
})

Im trying something like this but without succes.

No there is not, you'd have to wait until the element is really there before you call `fadeOut`, anything else is just guesswork. — adeneo, Jun 11 '15 at 17:44
Try applying fadeOut inside the success event of the ajax response. — JGV, Jun 11 '15 at 17:46
Post your code for the ajax call and we can show you where to put `.fadeout()`. — Ted, Jun 11 '15 at 17:48
possible duplicate of [Most efficient method of detecting/monitoring DOM changes?](http://stackoverflow.com/questions/2457043/most-efficient-method-of-detecting-monitoring-dom-changes) — vinayakj, Jun 11 '15 at 17:51

Leeish · Answer 1 · 2015-06-11T17:51:58.927

On page load $('.flash') doesn't exist. So you'd need to either have an event fire to trigger this, or I would imagine a timeout would work, but I would go with the event method.

setTimeout(fuction(){$('.flash').fadeOut();},200);

The better option is only attempt to fade out when something happens. So when a user does X that makes flash appear, then you fade it out, but without knowing your use case and code it's just conjecture.

For our flash object we actually have the element in the DOM always. Our AJAX and other calls simply modify it. I have a showFlash(msg,type,ttl) method that when called, sets the content, type, and time to live whenever I want. To technically the flash is always in the DOM.

I then have

$.ajax({/*AJAX STUFF*/,
    complete: function(data){
    /* DO STUFF */
    showFlash('Message to User','success',3000);
}

function showFlash(msg,type,ttl){
    $('.flash').html(msg).show().delay(ttl).fadeOut();
}

In a nutshell that's it.

jquery fadeOut on future element

1 Answers1