Bootstrap Dropdown события запускаются только на элемент HTML - PullRequest
Новая
       26

Bootstrap Dropdown события запускаются только на элемент HTML

1 голос
/ 30 октября 2019

Итак в соответствии с документацией Я должен иметь возможность просто захватить любое из заданных выпадающих событий на основе события .dropdown-menu.

Поэтому я попытался отладить с помощьюселектор *, поскольку он не работает. 

$(document).ready(function () {
    $('*').on('hide.bs.dropdown', function (ev) {
        console.log(ev);
    });
});

Странно, но корневой элемент html показывает как currentTarget для события.

Любая попытка повысить специфичностьв моем селекторе вызывает сбой. Я могу сослаться на target успешно захваченного события, и оно больше не будет работать. Даже если я попытаюсь использовать #sidebar * (его пра-пра-пра-прародитель) в качестве селектора, он не работает.

Я уже пробовал каждый селектор класса или атрибута, и он не работаетработай. Он примет его, только если он присоединен к элементу html.

Есть ли способ сделать это более конкретным или это все, что я собираюсь из этого выбрать?

Обновление:

Очевидно, это как-то связано с Laravel Mix. Он сломал все логику перехвата событий jQuery. Я не могу прикрепить простое событие нажатия к кнопке: 

$(document).ready(function() {
    $('#sidebar-toggle').on('click', function (ev) {
        console.log(ev);
    });
});

Используя снова * в качестве селектора, я фиксирую событие click на элементе html и ничего больше.

Я подозреваю, что это проблема привязки к объекту global вместо window, но из-за прошлых проблем с получением зависимостей для правильного связывания у меня не было выбора, кроме как использовать его.

Мой bootstrap.js файл: 

import Vue from 'vue';
import axios from 'axios';
import PopperJs from 'popper.js';

global._ = require('lodash');
global.$ = global.jQuery = require('jquery');
global.axios = axios;
require('bootstrap');

global.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Мой webpack.mix.js файл: 

const path = require('path');
const mix = require('laravel-mix');
const Dotenv = require('dotenv-webpack');

mix.disableNotifications();

// almost works but puts the manifest in the wrong place
// mix.setPublicPath('public/assets/build');

let assetDir = 'assets/build';

mix.config.fileLoaderDirs.fonts = `${assetDir}/${mix.config.fileLoaderDirs.fonts}`;
mix.config.fileLoaderDirs.images = `${assetDir}/${mix.config.fileLoaderDirs.images}`;

mix
    .webpackConfig({
        plugins: [
            new Dotenv()
        ],
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            modules: [
                path.resolve('./node_modules'),
                path.resolve('./resources/js')
            ]
        }
    })

    .js('resources/js/app.js', `public/${assetDir}/js`)
    .extract([
        'axios',
        'bootstrap',
        'jquery',
        'lodash',
        'popper.js'
    ])
    .autoload({
        'axios': ['window.axios', 'axios'],
        'jquery': ['window.jQuery', 'jQuery', 'window.$', '$'],
        'lodash': ['window._', '_'],
        'popper.js': ['window.Popper', 'Popper']
    })

    .version();
...