ボタンクリック時の呼び出し機能が動作しない

Question

ボタンクリックイベントで関数を呼び出したい。この関数は別のjsファイルで定義されており、function.phpファイルにenqueueというファイルがあります。ファイルがenqueueから読み込まれているのがわかります。しかし、そのボタンをクリックするとエラーが発生する

errorReferenceError: myFunction is not defined

私はthis linkを参照してください。より詳細な説明については、

<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

問題は、関数のスコープにあるをクリックすると、そのボタンのドロップダウンメニューを表示します。これを解決するには、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

私はあなたがボタンの onclick属性に ready機能を使用する必要がないことに気づい

を動作するはずですので、これで十分です：

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

しかし、これを行う代わりに、そのonclick属性をボタンから削除できます（インラインスクリプトを避けること、コードmaintainab ilityとセキュリティ上の理由）と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キーワードで置き換えることができます。}