I searched everywhere but I could not find the same problem. Maybe I did a bad search. Sorry.
Here is the issue, I call below function from classic js, the first time it is fired it is ok, completing, but the second and subsequent tries just fail, I think that FADEOUT is not being fired, since I have that DIV staying on the page.
Please advise how can I overcome this issue.
var Achtung = function(msg){
var achtung = $('<div id="achtung">'+msg+'<span class="close">x</span></div>');
$(achtung)
.css('position', 'fixed')
.css('top', '5px')
.css('display', 'none')
.css('align','center')
.css('width', '100%')
.css('margin-left', 'auto')
.css('margin-right', 'auto')
$('body').append(achtung);
$(achtung).fadeIn(1500);
var hideTimer = setInterval(hideAchtung, 3000);
$('#achtung .close').click(function(){hideAchtung();});
}
var hideAchtung = function(){ $('#achtung').fadeOut(500); }
and I am calling function from inside a javascript
Achtung('Message here...');
just change your code to like this:
$(document).on('click','#achtung .close',function(){hideAchtung();});
This code solved the problem.
var hideAchtung = function(){ $('#achtung').fadeOut(500, function(){$('#achtung').remove();}); }