Javascript Zurb基金会：滑块插件不'；t导入为ES模块时触发事件 我试图在我的网站上使用ES模块，而现在Zurb基金会有这个问题。我使用导入ES模块，不使用任何绑定器

当我在页面上放置一些经典的init代码时，滑块中的事件会按预期触发：

$（文档）.ready（函数（）{
/init基金会
//Foundation.addToJquery（$）；
$（document.foundation（）；
$（“#测试滑块”）.on（'moved.zf.slider'，function（）{
log（'slider滑动时应该工作！'）；
//console.log（$._数据（$（'.#测试滑块'）[0]）.events）；
});
});

好的。我想我找到了事件的原因

<>当问题发布时，<代码>基础站点< /Cult>模块导入使用ZURB基金会的最新版本（V5.63），该版本是用jQuery V3.5.1内部编译的。它可以通过以下URL内部和检查代码来检查

但在问题的代码示例中，我使用了

import$from'https://cdn.skypack.dev/jquery?min“

它导入最新的jQuery版本（v3.6.0）

因为我导入jQuery V3.6，基础模块内部使用jQuery V3.5.1，事件侦听器被放置在<强>不同范围（某种类型），它不同于滑块的范围或ZURB基金会UI元素的任何一个，如果我错了，请修复我。 备选案文1。 因此，解决方案是坚持使用特定版本的模块，以便与内部jQuery版本的

foundation sites

模块“匹配”

替换此项：

import $ from 'https://cdn.skypack.dev/jquery?min'; // Latest jQuery from skypack.dev
import { Foundation } from 'https://cdn.skypack.dev/foundation-sites?min'; // Latest Foundation from skypack.dev

为此：

import $ from 'https://cdn.skypack.dev/jquery@3.5.1?min'; // jQuery v3.5.1 from skypack.dev
import { Foundation } from 'https://cdn.skypack.dev/foundation-sites@6.6.3?min'; // Foundation v6.6.3 from skypack.dev

备选案文2。 如果有人有同样的问题，但不想“坚持”使用特定版本的jQuery

当基础包元素时，它会添加“代码> jQuery {Viste} {某种时间戳} /代码>属性到该元素。像这样：

由基础添加了两个属性，这些名称以<>代码> jQuyRe3510开始。其中一个包含

事件

属性。但是，当我们使用从不同ES模块导入的另一个jQuery版本时，还有另一个

jQuery3600

带有

事件

。当我这么做的时候

$('#test-slider').on('moved.zf.slider', function () {
   // Do something
});

moved.zf.slider

事件的注册进入

jQuery3600

，而不是进入

jQuery3510

因此，这里的解决方案是使用

jQuery3600

中的事件更新包含

事件的
jQuery3510
。我使用以下函数扩展jQuery：

$.fn.mutatedOn = function (events, callback) {

    function getPropsByName(obj, startWith) {
        return Object.keys(obj).filter((propertyName) => {
            return propertyName.indexOf(startWith) === 0;
        });
    }

    function findPropsWithEvents(obj) {
        const props = getPropsByName(obj, "jQuery");
        return props.find((element) => {
            return obj[element].events !== undefined;
        });
    }

    $(this).each((index, el) => {

        // Let's find all properties which starts with 'jQuery'.
        // And filter them to determine those which contains 'events'
        // right before we attach the event listener.
        const jqueryKeys = getPropsByName(el, "jQuery");
        const jqueryKeysWithEvents = findPropsWithEvents(el);

        $(el).on(events, callback);

        // After the listener attached, another 'jQuery' property with 'events' was added for $(el).
        // Let's find this newly added property using difference between new and old arrays.
        const newJqueryKeys = getPropsByName(el, "jQuery");
        const newJqueryKeysWithEvents = $(newJqueryKeys).not(jqueryKeys).get(0);

        // After we determine new property with 'events'
        // lets merge it into the old one to make Foundation events work as expected.
        $.extend(el[jqueryKeysWithEvents], el[newJqueryKeysWithEvents]);
    });
};

那么这个,

$('#test-slider').on('moved.zf.slider', function () {
    // Do something
});

可以简单地替换为以下内容：

$('#test-slider').mutatedOn('moved.zf.slider', function () {
    // Do something
});