自定义 WooCommerce 消息删除 HTML 标签上的 onClick 事件

Question

我已经覆盖了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？

Answer 1

为避免此问题，您应该使用 jQuery 脚本，而不是在 <div> 标记上使用 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) 屏幕截图 （点击“测试”时）：