Использование jQuery через ES6 в Symfony 4

Question

Я создаю довольно простое приложение с использованием Symfony 4. В настоящее время Symfony загружает Jquery и начальную загрузку и хочу начать создавать свои собственные триггеры. Итак, я начал добавлять свой собственный кусочек JS. В этом JS мне нужно определить, нажата ли определенная кнопка, поэтому мой инстинкт заключается в использовании функции нажатия jQuery.

У меня есть реальная проблема, чтобы заставить это работать. Мой дополнительный код компилируется Webpack (через бис), но ни в коем случае не сработает мое событие, независимо от того, на какой элемент я его поместил. Насколько я вижу, моя дополнительная функциональность 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()