Использование jQuery через ES6 в Symfony 4 - PullRequest
Новая
       34

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

0 голосов
/ 18 февраля 2019

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

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

1 Ответ

0 голосов
/ 18 февраля 2019

Эй, ваш прослушиватель кликов никогда не запускается, потому что вы импортируете его, но никогда не вызываете функцию.

Вы можете создать свои функции слушателя в отдельном файле, таком как 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()
...