function.php code related to Revolution Slider

Question

i have set a simple JS, just an alert message on click of button with id "button". It is working fine when i insert the code inside Revolution Slider Custom CSS/JS field.

function hello(){
        alert("Hello! I am an alert box!!");
}
jQuery("#button").click(hello);

But not working on the function.php file of the child theme, why is that?

function button_fn() {
    ?>
        <script>
            function hello(){
                alert("Hello! I am an alert box!!");
            }
            jQuery("#button").click(hello);
        </script>
    <?php
}
add_action('wp_enqueue_scripts', 'button_fn');

Probably because this outputs the script element to early, before the element you are trying to access via ID even exists. https://stackoverflow.com/questions/4498482/javascript-cant-find-element-by-id — CBroe, Sep 06 '21 at 13:10

Rajender Kumar · Answer 1 · 2021-09-07T07:32:34.220

0

Try below code:

function button_fn() {
    <script>
    function hello(){
        alert("Hello! I am an alert box!!");
    }
    jQuery(function() {
        jQuery(document).on('click', '#button', function(){ 
            hello();
        })
    })
    </script>
}

add_action('wp_enqueue_scripts', 'button_fn');

edited Sep 07 '21 at 07:32

answered Sep 06 '21 at 13:35

Rajender Kumar

174
7

@HowardE thanx for remind. Answer has been updated now. – Rajender Kumar Sep 07 '21 at 07:33

score 0 · Answer 2 · answered Sep 07 '21 at 10:02

The problem here is that you're trying to enqueue the script without any dependencies, so it's likely that jQuery hasn't been enqueued yet. Instead of using wp_enquque_scripts try wp_footer with a priority higher than 20. 20 is where the enqueue scripts hook fires.

function button_fn() {
    ?>
        <script>
            function hello(){
                alert("Hello! I am an alert box!!");
            }
            jQuery("#button").on('click', function(){
                 hello()}
            );
        </script>
    <?php
}
add_action('wp_footer', 'button_fn', 30);

function.php code related to Revolution Slider

2 Answers2