javascript - 单击按钮时的调用功能不起作用

Question

我想在按钮单击事件上调用函数。该函数是在另一个 js 文件中定义的，我将该文件放入我的 function.php 文件中。我可以看到该文件已从enqueue加载。但我得到了错误

errorReferenceError: myFunction is not defined

当我点击那个按钮时。我想在该按钮单击时显示下拉菜单

<button onclick="jQuery(document).ready(function($) {myFunction();});" class="dropbtn"><i class="fa fa-bars fa-lg" aria-hidden="true"></i></button>

自定义.js

(function( $ ) {

    function myFunction() {

        document.getElementById( 'myDropdown' ).classList.toggle( 'show' );

    }

    window.onclick = function( event ) { 

        if ( !event.target.matches( '.dropbtn' ) ) {

        var dropdowns = document.getElementsByClassName( 'dropdown-content' );
        var i;

            for ( i = 0; i < dropdowns.length; i++ ) {

                var openDropdown = dropdowns[i];

                if ( openDropdown.classList.contains( 'show' ) ) {

                    openDropdown.classList.remove( 'show' );

                } 

            } 

        }

    }

})( jQuery );

Answer 1

问题在于函数的范围，有关更详细的说明，请参阅 this link 。要解决此问题，请尝试调用 js 文件本身中的函数。例如:

$(document).ready(function(){
    function myFunction(){
    ...
    }

    $(".dropbtn").click(myFunction());
});