Symfony 4 JavaScript函数未定义

Question

我已经创建了一个 app.js（和 app.scss）文件，用于与Symfony Encore一起使用。

└───assets
    ├───css
    │   └───app.scss
    └───js
        └───app.js

app.js:

/**
 * Name: app.js
 * Desc: Main application javascript
 */

var $ = require('jquery');
require('bootstrap-sass');
require('../css/app.scss');

// Initialize tooltips
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});

var openLoginModal = function(element){
    $('#login-modal').modal('show');
}

在我的一个模板中，我想设置“onclick”事件来调用在app.js中定义的“openLoginModal”函数。

<a class="btn btn-info navbar-btn navbar-right" data-toggle="login-modal" onclick="openLoginModal(this)">Login</a>

当点击锚点元素时，控制台会显示以下错误：

Uncaught ReferenceError: openLoginModal is not defined
    at HTMLAnchorElement.onclick ((index):29)

我猜测由于某种原因，我不能访问app.js中的功能，但我对webpack的了解还不足以理解为什么会这样。

- Adam

---

尝试将 var openLoginModal 更改为 Window.prototype.openLoginModal。 我相信您正在尝试访问全局函数，但是您的脚本位于 webpack 模块中。 - Iwan Wijaya

我刚在这里回答了 https://stackoverflow.com/a/49316775/9083959 - lukas-reineke

Answer 1

尝试这个。

(function ($, window)
{
   window.openLoginModal = function(element){
       $('#login-modal').modal('show');
   }
}(jQuery, window);

- Mesut