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?

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?

• javascript
• jquery
• wordpress
• elementor

Share Improve this question Follow edited Dec 29, 2023 at 12:24 Death-is-the-real-truth 72.3k1010 gold badges5757 silver badges104104 bronze badges asked Dec 29, 2023 at 11:43 OHICTOHICT 49111 gold badge88 silver badges1818 bronze badges 1

• 1 I think it is better to use jQuery instead of $. please change $('#ipopup').on('click') into jQuery('#ipopup').on('click'). try it and inform me. – Matija Commented Dec 29, 2023 at 11:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

<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.

It looks like there might be a conflict or issue with the jQuery library. Ensure that jQuery is included before your script, and make sure there are no other scripts that might be overwriting the $ variable. You can use the jQuery keyword instead of the $ shorthand to avoid conflicts:

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

If in a page Some where jQuery.noConflict() is called on the jQuery file it includes , which means $ doesn't work, but jQuery does.

Pass $ into the function and add "jQuery" as a main function

<script type="text/javascript">
jQuery(document).ready(function($){

});
</script>