JavaScript函数不与Laravel混合定义

首先，在资源/ 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和测试后本地主机

其结果是，JavaScript的FUNC没有定义button1Clicked()resources/js/app.js。但可以定义testing.blade.php中的功能button2Clicked()。是从Laravel混合错误或我做了一些错误

来源

2017-10-09 YChen

你可以尝试使用 – iCoders

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

iCoders是正确的，你需要使用'{{}}'而不是'{!!'，因为'{!!'用于显示非转义内容 –

如何消除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>

来源

2017-10-10 00:19:52

所以如果我有很多JavaScript函数，我必须将所有函数放在$（document）.ready （）?? – YChen

JavaScript函数不与Laravel混合定义

回答

相关问题