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

Question

I've overridden notices/success.php template file, modifying the content this way:

<?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; ?>

When I now load the page, the elements are all generated but my onClick is removed:

<div class="woocommerce-message" role="alert"> <span> Kontodetails erfolgreich geändert. </span><div>TEST</div></div>

Why is this happening and how can I keep my onClick in every div or span within this message?

Answer 1

To avoid this problem, instead of using an onClick event on the <div> tag, you should use a jQuery script:

1) The overridden template notices/success.php file (excerpt):

<?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) The jQuery script:

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
}

Code goes in function.php file of your active child theme (or active theme), or in an external registered JS file.

3) The html output:

<div class="woocommerce-message" role="alert">
    <span>Hello World</span>
</div>
<div class="message-click">TEST</div>

4) A screenshot (when clicking on "TEST"):