ES6类中的jQuery触发器不起作用 [英] jQuery trigger inside ES6 class is not working

问题描述

我在ES6类中使用jQuery触发器苦苦挣扎.我无法弄清楚为什么此触发器将不起作用.

I´m struggeling with a jQuery trigger inside an ES6 class. I cant´t figure out why this trigger will not be working.

这是我的课程.应当在调用triggerFilter方法时执行触发器.

This is my class. The trigger should be executed when the triggerFilter method is called.

// vendor import
import $ from 'jquery';

export default class SortingBar {
    constructor() {
        this.element = '[data-sortingBar]';
        this.sortOption = $(this.element).find('.sorting-bar__item');
        this.sortType = '';
        this.sortTypeInput = $(this.element).find('[name="sortType"]');
        this.init();
    }

    init() {
        // early exit
        if ($(this.element).length === 0) {
            return false;
        }

        // trigger filter on sort option click
        this.sortOption.on('click', (e) => {
            this.triggerFilter(e.currentTarget);
        });
    }

    triggerFilter(element) {
        // avoid filter trigger for active sort option
        if ($(element).hasClass('active')) {
            return false;
        }

        // set sort option value for hidden input
        this._setSortTypeInputValue(element);

        // trigger filter change
        this.sortTypeInput.trigger('change');
    }

    _getSortType(element) {
        this.sortType = $(element).data('sort-type');
        return this.sortType;
    }

    _setSortTypeInputValue(element) {
        this.sortTypeInput.val(this._getSortType(element));
    }
}

此模块是这样导入到主文件中的

This module is imported in the main file like this

// modules import
import Overlay from './modules/overlay';
import SortingBar from './modules/sorting-bar';

// modules init
const overlay = new Overlay();
const sortingBar = new SortingBar();


// modules object
const modules = {
    overlay,
    sortingBar
};

// modules object default export
export default {
    modules
};

还有一个旧的filter.js文件，该文件将change事件绑定到应该触发的隐藏输入.该文件将在main.js文件之前加载.

There is also an old filter.js file in wich the change event is binded to the hidden input wich should be triggered. This file will be loaded before the main.js file.

$('[name=selectWrapper], [name=sortType], [data-filters=reset]').on('change', refreshByChange);

我使用webpack和babel-loader将文件编译到ES5.这是我的Webpack配置.

Im using webpack and babel-loader to compile the files to ES5. This is my Webpack config.

// require
const path = require('path');
const webpack = require('webpack');

// check node enviroment
const nodeEnv = process.env.NODE_ENV || 'development';
const isProd = (nodeEnv.trim() === 'production');

// default config settings
const config = {
    entry: {
        desktop: './src/main/js/thymeleaf_desktop/main_desktop.js'
        // mobile: './src/main/js/thymeleaf_phone/main_mobile.js'
    },
    output: {
        filename: 'main_[name].js',
        path: path.resolve(__dirname, 'target/classes/js/thymeleaf_desktop')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader?cacheDirectory=true',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    },
    plugins: [],
    devtool: 'inline-source-map'
};

// production config settings
if (isProd) {
    // eslint config settings
    const eslintConfig = {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /(node_modules|_externals|standalone)/,
        loader: 'eslint-loader',
        options: {
            configFile: path.resolve(__dirname, './src/build/eslint/webpack/.eslintrc')
        }
    };

    config.devtool = false;
    config.module.rules.push(eslintConfig);
    config.output.filename = 'main_[name].min.js';
    config.plugins.push(
        new webpack.optimize.UglifyJsPlugin()
    );
}

module.exports = config;

奇怪的是，当我将触发器放入main.js文件中时，一切工作正常.

The strange thing is, when I put the trigger in the main.js file everything is working just fine.

ES6类中的jQuery触发器是否存在已知问题?

Is there a known issue for jQuery trigger inside an ES6 class?

推荐答案

我通过将jQuery触发器更改为本地Javascript解决了该问题.

I solved the problem by changing the jQuery trigger to native Javascript.

来自:

this.sortTypeInput.trigger('change');

收件人:

const event = new Event('change'); document.getElementById('sortType').dispatchEvent(event);

const event = new Event('change'); document.getElementById('sortType').dispatchEvent(event);

我不知道为什么jQuery触发器无法正常工作.

I don´t know why jQuery trigger is not working thow.

这篇关于ES6类中的jQuery触发器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！