javascript - 自定义 WooCommerce 消息删除 HTML 标签上的 onClick 事件
问题描述
我已经覆盖notices/success.php
了模板文件,以这种方式修改内容:
<?php foreach ( $messages as $message ) : ?>
<div class="woocommerce-message" role="alert">
<span>
<?php
echo wc_kses_notice( $message );
?>
</span>
<div onClick="alert('LOL')">TEST</div>
</div>
<?php endforeach; ?>
当我现在加载页面时,所有元素都已生成,但我的 onClick 已删除:
<div class="woocommerce-message" role="alert"> <span> Kontodetails erfolgreich geändert. </span><div>TEST</div></div>
为什么会发生这种情况?如何在此消息中的每个 div 或 span 中保留我的 onClick?
解决方案
为避免此问题,<div>
您应该使用 jQuery 脚本,而不是在标签上使用 onClick 事件:
1) 被覆盖的模板 notices/success.php
文件(摘录):
<?php foreach ( $messages as $message ) : ?>
<div class="woocommerce-message" role="alert">
<span>
<?php
echo wc_kses_notice( $message );
?>
</span>
</div>
<div class="message-click">TEST</div>
<?php endforeach; ?>
2)jQuery脚本:
add_action( 'wp_footer', 'message_onclick_event');
function message_onclick_event() {
?>
<script>
jQuery(function($){
$(document.body).on('click', 'div.message-click', function(){
alert('LOL');
})
});
</script>
<?php
}
代码在您的活动子主题(或活动主题)的 function.php 文件中,或在外部注册的 JS 文件中。
3)html输出:
<div class="woocommerce-message" role="alert">
<span>Hello World</span>
</div>
<div class="message-click">TEST</div>
4)截图 (点击“测试”时):
推荐阅读
- ios - Firebase iOS 通知 - Flutter
- php - 数组中的 PHP 访问对象属性
- php - Wordpress 'orderby' => 'post__in' 不工作
- angular - 路由和导航:无法访问网页上的任何其他路由
- javascript - 我的 Javascript 和 Python 代码是否因为指数或其他原因给了我不同的答案?
- python - 创建基于 NaN 映射的 1 和 0 的键列
- node.js - MongoDB(Mongoose)按数组查询
- qt5 - 如何在正在运行的线程中立即取消 QSqldatabase::open?
- r - strwidth("W", cex = tl.cex) 中的错误:尚未调用 plot.new
- java - 变量定义中带有 findViewById 的 NullPointerException