Anruffunktion auf Knopfdruck funktioniert nicht

Question

Ich möchte eine Funktion auf Knopf Klick Ereignis aufrufen. Die Funktion ist in einer anderen js-Datei definiert und ich habe enqueue diese Datei in meiner function.php Datei. Ich kann sehen, dass die Datei von enqueue geladen wurde. Aber ich habe Fehler

errorReferenceError: myFunction is not defined

wenn ich auf diesen Knopf klicke. Ich möchte auf diese Schaltfläche klicken

<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

Das Problem für ausführlichere Erklärung ist this link verweisen mit dem Umfang der Funktion, Drop-Down-Menü angezeigt werden soll. Um es zu lösen, versuchen Sie, die Funktion innerhalb der js-Datei selbst aufzurufen. Zum Beispiel:

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

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

Answer 2

Sollte funktionieren

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

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

Answer 3

ich, dass Sie die ready Funktion im onclick Attribut der Schaltfläche verwenden, nicht bemerkt, müssen daher wird dies genügen:

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

Anstatt dies jedoch zu tun, können Sie das onclick Attribut aus der Schaltfläche entfernen (es ist ratsam, Inline-Skripte zu vermeiden, für Code maintainab ility und Sicherheitsgründen) und versuchen, die Lösung Manikiran vorgeschlagen, dass Sie, aber mit einem kleinen Unterschied definieren Sie myFunction aber nicht ausführen es in der 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 
}); 

^{ich bemerkt, dass Sie verwenden nicht die $ in Einige Teile können Sie alle mit dem Schlüsselwort jQuery ersetzen.}