5

我正在尝试使用 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 不可移植。这只是为了测试。

4

2 回答 2

3

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

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

您正在加载 jQuery 两次：

  • 已加载 jQuery
  • 自动完成插件被加载到 jQuery 中
  • jQuery 再次加载
  • 它没有自动完成插件
于 2013-01-30T15:29:46.683 回答
0

你试过这样吗：

$.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();
});

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

于 2012-12-22T17:59:16.583 回答