以编程方式加载时无法从类函数内部访问 jQuery UI

Posted 2023-05-09

【中文标题】以编程方式加载时无法从类函数内部访问 jQuery UI

【英文标题】：Can't access jQuery UI from inside a class function when loaded programmatically

【发布时间】：2021-06-05 01:31:42

【问题描述】：

我正在像这样以编程方式加载 jQuery 和 jQuery UI：

const jQuery_3_6_0 = document.createElement('jQuery_3_6_0');
jQuery_3_6_0.src = '/js/jquery-3.6.0.min.js';
jQuery_3_6_0.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(jQuery_3_6_0);

const jQuery_ui = document.createElement('jQuery_ui');
jQuery_ui.src = '/js/jquery-ui.min.js';
jQuery_ui.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(jQuery_ui);

然后，我在 jQuery 函数中声明一个类：

(function($) 

    class Moo 
        constructor() 
            let classThis = this;
            window.$(document).on('click scroll keyup', function (e) 
                classThis.catchEvent(e);
            );
            this.debug.init();
        

        debug = 
            init: function (content) 
                window.$("body").prepend(
                    "<div " +
                    "   style='position:absolute; padding:10px; background: #333; color: #FFF;'" +
                    "   id='debug'>" +
                    "</div>");
                this.setOutput(content);
                window.$("#debug").draggable();
            ,
            setOutput: function (content) 
                window.$('#debug').text(content);
            
        
    

    let cow= new Moo();

(jQuery_3_6_0))

jQuery 加载正常，但我无法使新元素可拖动（）。我得到的只是：

Uncaught TypeError: window.$(...).draggable is not a function

问题

如何让我的脚本加载 jQuery UI，然后让我的类函数使用 draggable()？

【问题讨论】：

你确定 jQuery 加载正常吗，因为 document.createElement('jQuery_3_6_0') 和 document.createElement('jQuery_ui') 都不正确。您正在尝试创建 <jQuery_3_6_0 /> 和 <jQuery_ui /> 元素。这些必须是 <script> 元素。

@rory 是的，jQuery 确实可以工作。我先测试了一下。我不知道为什么 ui 不是

@RoryMcCrossan 经过测试，显然 jQuery 从不工作。它是从我的测试脚本中导入的。我正在添加答案，因为我刚刚想通了:)

【参考方案1】：

我上面的代码中的问题是它没有等待每个加载。此外，正如 Rory 在评论中指出的那样，我的元素是错误的。

因此，我更新了我的代码，如下所示，它现在可以工作了！

let jQuery_3_6_0 = document.createElement('script');
jQuery_3_6_0.setAttribute('src', 'http://myurl.com/js/jquery-3.6.0.min.js');
jQuery_3_6_0.setAttribute('type', 'text/javascript');
document.head.appendChild(jQuery_3_6_0);

jQuery_3_6_0.onload = () => 

    let jQuery_ui = document.createElement('script');
    jQuery_ui.setAttribute('src', 'http://myurl.com/js/jquery-ui.min.js');
    jQuery_ui.setAttribute('type', 'text/javascript');
    document.head.appendChild(jQuery_ui);

    jQuery_ui.onload = () => 

        class Moo
        
            //class stuff.... including element.draggable()
        

        let cow = new Moo();