通過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()