如何在 Wordpress Elementor 脚本完全加载后运行我的脚本？

Posted 2023-05-08

【中文标题】如何在 Wordpress Elementor 脚本完全加载后运行我的脚本？

【英文标题】：How to run my script, After Wordpress Elementor scripts fully loaded?

【发布时间】：2020-07-28 19:53:54

【问题描述】：

我是 Wordpress 的新手，但我在 java 开发。我使用 OceanWP、Elementor 开发了一个小型 Wordpress 网站。在主页中，我需要显示我网站中的注册会员数量。

所以，在开发页面时，我使用了 Elementor 的 COUNTER WIDGET ，其中 STARTING NUMBER 是 @987654323 @ 和 ENDING NUMBER 是 5 。但实际上我需要调用 DB 以使用 ajax 获取注册成员的数量并将其显示在主页上。所以我决定在我的 DOM 完全加载后使用 jQuery 编写自己的自定义代码来进行 ajax 调用。

我在 functions.php

中编写了以下代码

function load_js_assets() 

    if( is_page( 26 ) ) 
        wp_enqueue_script( 'home-js', get_template_directory_uri() . '/ucws-js/home-js.js', array ( 'jquery' ), 1.1, true);
     


    add_action( 'wp_enqueue_scripts', 'load_js_assets' );

那么我的home-js.js会如下，

jQuery(document).ready(function( $ ) 

    alert("Default members : "+$("#registered-Members").text()); //alerts --> Default members : 1 // But expected Default members : 5
    getRegisteredMembers_UsingAjaxCall(); //ajax call to DB to get total number of registered members dynamically
);

我的期望：在 Elmetor 加载其所有 js 文件后，我需要调用或加载我的 jQuery(document).ready(function( $ )。请指导我，如果我走错了路。

注意：我欢迎所有满足我要求的建议。

【问题讨论】：

加载页面时能看到源码中的ajax代码吗？

Ajax 一切正常......

所以AJAX在源代码中显示，但它没有获取注册成员的数量？

Ajax 和获取数据不会有问题...我从 dB 接收数据，我可以在警报框中看到值。但是由于 elementor COUNTER WIDGET 我无法显示......因为我认为 elementor counter 在我的脚本加载后运行一些脚本来显示动画......所以我需要优先考虑它。

【参考方案1】：

在你的 functions.php 主题中尝试这些钩子 https://code.elementor.com/js-hooks/

add_action( 'wp_footer', function() 
    if ( ! defined( 'ELEMENTOR_VERSION' ) ) 
        return;
    
    ?>
    <script>
        jQuery( function( $ ) 
            // jquery example
            console.log($('body'));
         );
    </script>
    <?php
 );