无法用jQuery向div插入文本并执行显示动画的问题求助

相关代码片段 #

1. 通知DIV结构（my-main.php） #

<div id="my_notice" class="my_notice ui-corner-all"></div>

2. WordPress脚本注册与模板引入 #

wp_register_script('my_notice_js', ......'notification/my-notice.js');
wp_enqueue_script('my_notice_js');

include_once( plugin_dir_path(__FILE__) . 'my-main.php');
new my_main_form;

3. PHP验证失败时调用JS函数 #

function do_operation() {
 
 if ( $this->state === FALSE ) {
  if ( !isset($this->error_message) )
   $this->error_message = utf8_encode("Operation not completed!");
  ?><script type="text/javascript">showMyNotice('<?php echo $this->error_message; ?>', true);</script><?php
 } 
 // 其他逻辑
 }

4. JS处理函数（my-notice.js） #

function showMyNotice(msg, alert) {
 console.log('executing showMyNotice....');
 $(window).scrollTop(0);
 $('#my_notice').text(msg).show("blind").delay(5000).toggle( "blind" );   
};

问题现象 #

点击表单提交按钮后：

• showMyNotice函数正常执行，控制台能打印日志，页面也能滚动到顶部
• 但#my_notice的文本设置、blind动画操作全部失效
• 直接在浏览器控制台执行相同的DOM操作/动画代码，一切正常
• 尝试将通知DIV设为可见后用$('#my_notice').empty().append('showing some text...')追加文本，同样无效，但控制台执行有效

排查方向 #

• 检查DOM元素加载时机：在showMyNotice开头添加console.log($('#my_notice').length)，如果输出0，说明执行函数时元素还没渲染到DOM中。PHP输出的脚本可能早于DOM加载完成，需确保脚本在DOM就绪后执行，比如包裹在$(document).ready()中，或者将脚本输出到页面底部。
• 确认jQuery UI依赖：blind动画属于jQuery UI的效果模块，WordPress默认的jQuery不包含UI组件。需注册并加载jquery-ui-core和jquery-ui-effects-blind，可在wp_register_script时添加依赖：wp_register_script('my_notice_js', 'path/to/my-notice.js', array('jquery', 'jquery-ui-core', 'jquery-ui-effects-blind'));。
• 排查表单提交的页面刷新：如果表单是同步提交（非AJAX），PHP输出的JS代码会在页面刷新前短暂执行，但随即被页面重载覆盖，导致动画来不及展示。需改为AJAX提交表单，或者在表单提交时阻止默认刷新行为。
• 修复字符串转义问题：$this->error_message若包含单引号、换行或特殊字符，会破坏JS语法，中断后续代码。改用wp_json_encode安全输出字符串：showMyNotice(<?php echo wp_json_encode($this->error_message); ?>, true);，自动处理转义。
• 检查函数/变量冲突：确认showMyNotice函数没有被其他脚本覆盖，可在函数内添加console.log(showMyNotice)查看是否为预期函数。建议将JS代码包裹在自执行函数中避免全局污染：(function($) { function showMyNotice(...) { ... } window.showMyNotice = showMyNotice; })(jQuery);。
• 排查CSS样式干扰：检查#my_notice的CSS是否有display: none !important、opacity: 0、overflow: hidden等属性，或者父元素是否被隐藏，导致动画无法正常触发。可通过浏览器开发者工具查看元素的计算样式。

内容的提问来源于stack exchange，提问作者Luigino