jQuery.Deferred exception: $ is not a function

Question

I'm facing a strange issue with jQuery. I've created a custom snippet of code in elementor custom code and I'm loading it at the end of the body. I'm trying to open a popup from an accordion when an anchor tag is clicked but I'm getting these errors in the console

Uncaught TypeError: $ is not a function

jquery.min.js?ver=3.7.1:2 jQuery.Deferred exception: $ is not a function TypeError: $ is not a function`

this is the snippet of code

<script>
jQuery(document).ready(function(){
    $('#ipopup').on('click', function(){
            window.elementorProFrontend.modules.popup.showPopup({ id: 16625 });
    });
});
</script>

I have not used jQuery for a long time, how I can fix this problem?

Answer 1

<script>
jQuery(document).ready(function($) {
    // Use $ inside the function scope as an alias for jQuery
    $('#ipopup').on('click', function() {
        window.elementorProFrontend.modules.popup.showPopup({ id: 16625});
    });
});
</script>

Pass jQuery object as a parameter ($) to the document.ready function, allowing you to use $ as an alias for jQuery within the scope of this function.