首页 > 解决方案 > Bootstrap Dropdown 事件仅在 html 元素上触发

问题描述

因此,根据文档,我应该能够根据事件捕获任何给定的下拉.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();

标签: jquerytwitter-bootstraplaravel-mix

解决方案


推荐阅读