How to use jQuery function call inside AgentPress Pro Custom HTML widget?

[MaryDu]

I am having problem to use the jQuery function to display dynamic number count up inside the Custom HTML widget. If I put the script inside the HTML code, in the editing mold it shows working but not working when display the page. So I moved the jQuery function into the function.php under the Theme directory and registered the function using:

add_action( 'wp_enqueue_scripts', 'add_counter_script' );
function add_counter_script() {
wp_enqueue_script(
'NumberCounter',
get_template_directory_uri() . '/js/NumberCounter.js',
array('jquery')
);
}

My NumberCounter.js file is like this:
jQuery(document).ready(function($) {
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
})

It is still not working. Which part did I do wrong? Please help!

http://ciciwang.co.nz/

[Victor Font]

The counter is working fine.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Brad Dalton]

https://www.studiopress.community/topic/agentpress-pro-theme-front-page-custom-html-calling-jquery-count-up-function/#post-220431

---

Tutorials for StudioPress Themes.

[MaryDu]

Thank you so much Victor and Braddalton! I found the solution - without creating any extra function, inside the HTML I simply changed all $ sign to JQuery which make it work! Thank you guys for following up! Very appreciate that 🙂

[Author]

Posts