Пользовательские сообщения WooCommerce удаляют событие onClick для тега HTML

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>

Почему это происходит и как я могу держать мой OnClick в каждом div или промежутке в этом сообщении?

Answer 1

Чтобы избежать этой проблемы, вместо использования события onClick для тега <div> следует использовать скрипт jQuery:

1) Переопределенный шаблон notices/success.php file (выдержка) :

<?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) Снимок экрана (при нажатии на «ТЕСТ») :