通过Symfony 4中的ES6使用jQuery

Question

我正在使用Symfony 4构建一个相当简单的应用程序。我目前有Symfony加载Jquery和bootstrap，并希望开始构建自己的触发器。 因此，我开始添加自己的JS。 在此JS中，我需要检测是否单击了某个按钮，所以我的直觉是使用jQuery的on click函数。

我真的很难让这个工作。 我的其他代码正在由Webpack（通过encore）进行编译，但是无论我放置什么元素，事件都不会触发。 据我所知，我的其他Javascript功能根本不会被调用。

任何帮助表示赞赏。 我绝不是ES6专家，所以我在这里可能会出错。

资产/ JS / app.js

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

应用程序/ 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()