在 Symfony 4 中通过 ES6 使用 jQuery

Question

我正在使用 Symfony 4 构建一个相当简单的应用程序。我目前正在加载 Symfony Jquery 和 bootstrap，并且想开始构建我自己的触发器。所以我开始添加我自己的 JS。在这个 JS 中，我需要检测是否单击了某个按钮，所以我的直觉是使用 jQuery 的点击功能。

我很难让它正常工作。我的附加代码正在由 Webpack 编译（通过 encore），但无论我把它放在什么元素上，我的事件都不会触发。据我所知，我的额外 Javascript 功能根本没有被调用。

感谢任何帮助。我绝不是 ES6 专家，所以我这里可能有一些非常错误的地方。

assets/js/app.js

import '../css/app.scss';
import $ from 'jquery';
import 'bootstrap';
import './checkLoan'; ## This is my file

app/js/checkLoan.js

export default function() {
    console.log('i got loaded');
    $('#my-button').click(function (event) {
        event.preventDefault();
        console.log('I got clicked')
    });
};

Answer 1

嘿，您的点击侦听器从未被触发，因为您导入了它，但您从未调用该函数。

您可以在单独的文件中创建您的侦听器函数，例如 listener.js :

export default {
    clickListener(){
        console.log('i got loaded');
        $('#my-button').click(function (event) {
            event.preventDefault();
            console.log('I got clicked')
        });
    }
};

并且在页面加载完成后触发主 app.js 中的函数：

import $ from 'jquery';
import listeners from "./listeners"
$(document).ready(function () {
    listeners.clickListener();
    ...
});

编辑：还要确保项目根目录下的 webpack.config.js 文件未注释以下行

.autoProvidejQuery()

在 Symfony 4 中通过 ES6 使用 jQuery

Using jQuery via ES6 in Symfony 4

javascript

ecmascript-6

webpack-encore

symfony4