2017-10-09 73 views
1

首先,在資源/ js代碼/ app.jsJavaScript函數不與Laravel混合定義

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

其次,在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> 

代碼npm run dev和測試後本地主機

enter image description here

其結果是,JavaScript的FUNC沒有定義button1Clicked()resources/js/app.js。但可以定義testing.blade.php中的功能button2Clicked()。 是從Laravel混合錯誤或我做了一些錯誤

+0

你可以嘗試使用 iCoders

+0

你可以添加你的'webpack.mix .js'和'app.js'文件? –

+1

iCoders是正確的,你需要使用'{{}}'而不是'{!!',因爲'{!!'用於顯示非轉義內容 –

回答

0

如何消除onclick屬性並添加ID:

<button id="btn1">Button 1</button> 

腳本

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

檢查的代碼片段

$(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

所以如果我有很多JavaScript函數,我必須將所有函數放在$(document).ready ()?? – YChen