[英]jQuery not displaying appended content
When I drop a debug point in my source file I can see the following image: 当我在源文件中删除调试点时,我可以看到以下图像:
But when I remove this debug point, I only see the following: 但是当我删除这个调试点时,我只看到以下内容:
The change in color is affected by an overlay with some opacity. 颜色的变化受到具有一些不透明度的叠加的影响。
The relevant code is: 相关代码是:
flashSuccessMessage = function(msg) {
$('#overlay').hide();
var $ch = $("#content-header");
$ch.after('<div id="flash_message" class="alert"></div>');
var $fm = $("#flash_message");
$fm.addClass("alert-success");
$fm.append(msg);
$fm.show().children().show();
$fm.fadeOut(3000);
$fm.empty();
}
And in this case msg is "Job Type Added Successfully" 在这种情况下,msg是“成功添加的作业类型”
I can't understand why I only see the message when I break on the execution after the point where I call $fm.append(msg); 我无法理解为什么在我调用$ fm.append(msg)之后我在执行中断时才看到该消息; It doesn't matter which I break on after that (of the three lines), it will appear.
在那之后我(三条线)中断的并不重要,它会出现。 When I don't have any break and let the page execute the script, the green alert appears but no words.
当我没有任何中断并让页面执行脚本时,会出现绿色警报,但没有单词。
Any ideas? 有任何想法吗?
I've tried various jQuery methods here - instead of .append() using .html() for example, and I've tried inserting the msg inside the with the flash_message id to begin, tried inserting the message wrapped in 我在这里尝试了各种jQuery方法 - 而不是使用.html()代替.append(),我尝试在flash_message id中插入msg开始,尝试插入包含在内的消息
tags, tried re-ordering things, (but I need to clear the contents of this div at the end...) 标签,尝试重新订购的东西,(但我需要在结束时清除这个div的内容...)
I've used jQuery's .delay() method, etc. Is it jumping to executing .empty() despite other elements using a timer to fully execute? 我已经使用了jQuery的.delay()方法等。它是否跳转到执行.empty()尽管其他元素使用计时器来完全执行?
Add a callback to your fadeOut
so that the contents aren't emptied until $fm
is completely hidden: 添加一个回调到你的
fadeOut
以便在$fm
被完全隐藏之前不会清空内容:
flashSuccessMessage = function(msg) {
$('#overlay').hide();
var $ch = $("#content-header");
$ch.after('<div id="flash_message" class="alert"></div>');
var $fm = $("#flash_message");
$fm.addClass("alert-success");
$fm.append(msg);
$fm.show().children().show();
$fm.fadeOut(3000, function(){ // empty() is not called until
$(this).empty(); // the animation is complete
});
}
Without the callback, the empty()
method is being triggered immediately after fadeOut()
. 如果没有回调,则在
fadeOut()
之后立即触发empty()
方法。 This causes the content to be emptied BEFORE the animation is complete. 这会导致在动画完成之前清空内容。
More information on jQuery's fadeOut method can be found in the docs . 有关jQuery的fadeOut方法的更多信息可以在文档中找到。
The animations in JQuery are asynchronous, so the code keeps executing while the animation happens. JQuery中的动画是异步的,因此代码会在动画发生时继续执行。 .fadeOut has a completion block which you can read about at http://api.jquery.com/fadeOut/ .
.fadeOut有一个完成块,您可以在http://api.jquery.com/fadeOut/上阅读。
So, instead of calling fm.empty() after your animation, you should put it inside a function and pass that function into fade out. 因此,不应在动画后调用fm.empty(),而应将其放在函数中并将该函数传递给淡出。 That function will then run after the animation completes.
然后在动画完成后运行该函数。
but I need to clear the contents of this div at the end...
但我需要在最后清除这个div的内容......
Use html
instead of append
: 使用
html
代替append
:
$fm.html(msg);
$fm.fadeOut(3000, function(){
$fm.empty();
});
Check doc of fadeOut
: 检查
fadeOut
文档:
.fadeOut( [duration ] [, complete ] )
complete Type: Function() A function to call once the animation is complete.
complete类型:Function()动画完成后调用的函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.