javascript - 自定义 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

要避免此问题，请不要在 <div> 上使用 onClick 事件标记，您应该使用 jQuery 脚本:

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) 屏幕截图 (点击“测试”时):