2017-10-09 5 views
1

D'abord, le code dans les ressources/js/app.jsfonction JavaScript n'est pas définie avec Laravel Mix

function button1Clicked(){ 
    console.log('Button 1 is clicked'); 
} 

En second lieu, code testing.blade.php

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="csrf-token" content="{{ csrf_token() }}"> 
    <title>Testing</title> 
</head> 
<body> 
    <button onclick="button1Clicked()">Button 1</button> 
    <button onclick="button2Clicked()">Button 2</button> 

    <script type="text/javascript" src="{!! asset('js/app.js') !!}"></script> 
    <script type="text/javascript"> 
    function button2Clicked(){ 
     console.log('Button 2 is clicked'); 
    } 
    </script> 
</body> 
</html> 

Après npm run dev et d'essais localhost

enter image description here

en conséquence, JavaScript func button1Clicked() dans resources/js/app.js n'est pas définie. mais la fonction button2Clicked() dans testing.blade.php peut être définie. Est-ce un bug de Laravel Mix ou je fait quelques erreurs

+0

pouvez-vous essayer en utilisant iCoders

+0

Pourriez-vous ajouter le contenu complet de votre 'webpack.mix Les fichiers .js' et 'app.js'? –

+1

iCoders est correct, vous devez utiliser '{{}}' et non '{!!' car les '{!!' sont utilisés pour afficher le contenu non échappé –

Répondre

0

Que diriez-vous de retirer l'attribut onclick et l'ajout d'un ID:

<button id="btn1">Button 1</button> 
scénario

$(document).ready(function(){ 
    function button1Clicked(){ 
     console.log('Button 1 is clicked'); 
    } 
    $("#btn1").click(button1Clicked); 
}); 

à cocher l'extrait de code

$(document).ready(function() { 
 
    function button1Clicked() { 
 
    console.log('Button 1 is clicked'); 
 
    } 
 
    $("#btn1").click(button1Clicked); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <button id="btn1">Button 1</button> 
 
    <button onclick="button2Clicked()">Button 2</button> 
 

 
    <script type="text/javascript" src="{!! asset('js/app.js') !!}"></script> 
 
    <script type="text/javascript"> 
 
    function button2Clicked() { 
 
     console.log('Button 2 is clicked'); 
 
    } 
 
    </script> 
 
</body>

+0

donc si j'ai beaucoup de fonctions JavaScript, je dois mettre toute la fonction dans le $ (document) .ready() ?? – YChen