wp_add_inline_script没有向我的页面添加任何内容，无法弄清原因

Question

I want to add inline script to just a single page, so trying to add in the page template file. However, both placements of the code above or below the footer call results in nothing being outputted in the source.

I can't figure out how this is supposed to work, can anyone help?

** Page Template **

<?php
get_footer('blank');
function cardpay_demo_script() {
    wp_add_inline_script(
        'jquery',
        '$(".btn-next").click(function() {
            $(".nav-pills .active").parent().next("li").find("a").removeClass("disabled").trigger("click");
        });'
    );
}
add_action('wp_enqueue_scripts', 'cardpay_demo_script');

** Footer File **

<?php wp_footer(); ?>
</body>
</html>

Answer 1

You are placing the function on the wrong file. The function should go on the theme's functions.php file and not any default template file or your custom template file .

The reason for this is that in WordPress; an Action is a PHP function that is executed at specific points throughout the WordPress Core and since your custom templates will be called way after the hook has been triggered the function will never actually run, so it won't print anything.

You can use is_page() or is_page_template() to determine if it is the page or page template you're looking for.

Here is some additional information on action hooks: https://codex.wordpress.org/Glossary#Action

add_action( 'wp_enqueue_scripts', function () {
   if( !is_page_template('My Template') ) return;
   if ( ! wp_script_is( 'jquery', 'done' ) ) {
     wp_enqueue_script( 'jquery' );
   }
   wp_add_inline_script( 'jquery', '$(".btn-next").click(function() { $(".nav-pills .active").parent().next("li").find("a").removeClass("disabled").trigger("click");
        });' );
});

or you can just print your scripts on the footer using the wp_footer hook. Just put this on your theme's functions.php file

add_action('wp_footer', function (){ 
   if( !is_page_template('My Template') ) return;
?>
    <script type="text/javascript">
        jQuery(".btn-next").click(function() { jQuery(".nav-pills .active").parent().next("li").find("a").removeClass("disabled").trigger("click");
            });
    </script>

<?php   
});