Jquery Javascript 函数未定义答案

【问题标题】：Jquery Javascript Function UndefinedJquery Javascript 函数未定义
【发布时间】：2012-12-22 17:45:54
【问题描述】：

我正在尝试使用 python-django 应用程序调试 JS/Jquery 问题，同时尝试在我自己的 django 项目中实现它。我使用浏览器的开发者控制台检索到以下错误：

TypeError: 'undefined' is not a function (evaluating '$(this).yourlabsWidget()')

于是我去寻找函数'yourlabsWidget()是在哪里定义的，它就在函数调用的正上方。

$.fn.yourlabsWidget = function(overrides) { ... }

$(document).ready(function() {
$('.autocomplete-light-widget[data-bootstrap=normal]').live('initialize', function() {
     $(this).yourlabsWidget();
});

我对 javascript 或 jquery 了解不多，所以我在这里完全不知所措。假设在语法上没有任何错误，这样的问题是否意味着 jquery 无法正常工作？我知道这不是很多信息，但我会添加任何其他所需的相关信息。

给我带来麻烦的应用程序和特定文件在这里（分别），

我已经在我的开发服务器上使用它自己的测试项目测试了该应用程序，并且它在它自己的测试项目中开箱即用。但是，如果我将一个工作测试应用程序安装到我自己的 django-project 中，它就不再工作了。

更新：

整个函数定义：

$.fn.yourlabsWidget = function(overrides) {
var overrides = overrides ? overrides : {};

if (this.data('widget') == undefined) {
    // Instanciate the widget
    var widget = new yourlabs.Widget(this);

    // Pares data-*
    var data = this.data();
    var dataOverrides = {autocompleteOptions: {}};
    for (var key in data) {
        if (!key) continue;

        if (key.substr(0, 12) == 'autocomplete') {
            var newKey = key.replace('autocomplete', '');
            newKey = newKey.replace(newKey[0], newKey[0].toLowerCase())
            dataOverrides['autocompleteOptions'][newKey] = data[key];
        } else {
            dataOverrides[key] = data[key];
        }
    }

    // Allow attribute overrides
    widget = $.extend(widget, dataOverrides);

    // Allow javascript object overrides
    widget = $.extend(widget, overrides);

    this.data('widget', widget);

    // Setup for usage
    widget.initialize();

    // Widget is ready
    widget.widget.attr('data-widget-ready', 1);
    widget.widget.trigger('widget-ready');
}

return this.data('widget');
}

HTML（包括）

<!DOCTYPE html>
<html lang="en-us" >
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css" />
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/static/admin/css/ie.css"     /><![endif]-->

<script type="text/javascript">window.__admin_media_prefix__ = "/static/admin/";</script>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="/static/autocomplete_light/autocomplete.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/widget.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/addanother.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/text_widget.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/remote.js"></script>
<link rel="stylesheet" type="text/css" href="/static/autocomplete_light/style.css" />

HTML 表格：

<span class="autocomplete-light-widget customer_order_products_set-0-product_id
single"
id="id_customer_order_products_set-0-product_id-wrapper"
data-max-values="1" data-bootstrap="normal"
data-autocomplete-url="http://127.0.0.1:8000/autocomplete/InventoryAutocomplete/" data-autocomplete-choice-selector="[data-value]" data-autocomplete-placeholder="THIS IS WORKING"
>

注意：我知道 URL 不可移植。只是为了测试。

【问题讨论】：

你能提供 $.fn.yourlabsWidget() 的实现吗？
我认为实现是指函数的代码。当然可以。我会更新问题。如果这不是你的意思，请告诉我，我会更正。
如果works out of the box with in it's own test project 不清楚当你得到错误时有什么不同
正是我的问题，我希望关于 javascript 处理它的函数定义的方式有一些我不明白的地方，也许有人会马上意识到问题一定与未加载的脚本有关正确，否则一定有问题。

标签： javascript jquery django-autocomplete-light

【解决方案1】：

$(this).yourlabsWidget() undefined 不是函数

这意味着$(this).yourlabsWidget 未定义。

你正在加载 jQuery 两次：

jQuery 已加载
自动完成插件被加载到jQuery中
jQuery 再次加载
它没有自动完成插件

【讨论】：

这是正确答案！您的 base.html 和其他扩展的 html 文件可能正在调用 jQuery

【解决方案2】：

你试过这种方式吗：

$.fn.yourlabsWidget = function(overrides) { ... };
$(document).ready(function() {
    $('body').on('load', function() {
       $('.autocomplete-light-widget input[data-bootstrap=normal]').yourlabsWidget();
    });
});

或者你也可以试试这个：

$(document).ready(function() {
   $('.autocomplete-light-widget input[data-bootstrap=normal]').yourlabsWidget();
});

我猜您在代码中缺少输入或选择标记引用。看看这是否有效

【讨论】：

好吧，当我这样做时错误消失了，但我的应用程序仍然无法工作。我真的不相信代码本身有问题，因为我已经在我的开发服务器上使用它自己的测试项目测试了应用程序，并且它在它自己的测试项目中开箱即用。我将把它添加到问题中。
感谢您的意见。第二个选项是给我完全相同的错误。
我猜您在代码中缺少输入或选择标记引用。 请提供标签，我在这里假设 .
我向 Jai 道歉，我不确定你指的是什么。我试图不重载代码，因为我真的不认为问题与代码本身特别相关，因为它在包含在测试应用程序中时工作正常。我希望有一些我不知道相关 javascript 和 jquery 库会导致函数未定义的问题。如果有帮助，我会在问题中增加更多代码。
确定可以粘贴相关的html吗？