Question

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

errorReferenceError：myFunction未定义

当我点击该按钮时。我想在该按钮上单击

显示下拉菜单

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

custom.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());
});

Answer 2

应该工作

$(document).ready(function(){
    function myFunction(){
        alert ('Say something!');
    }

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

Answer 3

我注意到您不需要在按钮的ready属性中使用onclick函数，因此这就足够了：

<button onclick="myFunction();" class="dropbtn">
  <i class="fa fa-bars fa-lg" aria-hidden="true"></i>
</button>

不是这样做，而是可以从按钮中删除onclick属性（出于代码可维护性和安全性原因，最好避免使用内联脚本）并尝试使用Manikiran建议的解决方案，但只需一个差异很小，您在myFunction中定义custom.js但不执行：

jQuery(function(){
  function myFunction(){
    jQuery( '#myDropdown' ).toggle( 'show' ); //this is the jQuery way
  }

  // remaining code of your custom.js

  jQuery(".dropbtn").click(myFunction); // binds the click event to
                                        // all the buttons with the dropbtn class
});

^{我注意到您在某些部分没有使用$，您可以使用jQuery关键字替换它们。}

点击按钮时的通话功能不起作用

3 个答案: