定制的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或跨度中保持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）屏幕截图 （单击“测试”时）：