TypeError 'thing' 未定义，带有 javascript 实例答案

【问题标题】：TypeError 'thing' is undefined, with javascript instancesTypeError 'thing' 未定义，带有 javascript 实例
【发布时间】：2015-12-19 17:21:40
【问题描述】：

所以我遇到了 javascript 对象的问题，并且在实例化中访问函数。这是我在主要代码中得到的。我实例化了一个 IFU 对象。在该对象的初始化中，我实例化了一个 Dapqa 对象并将其分配给一个变量 ifu.dapqa = new Dapqa()。我在绑定到函数 addComments onclick 的表单上有一个提交按钮。这个函数是我的 Dapqa 对象的一部分。

<script type="text/javascript" src="static/js/ifu.js"></script>
<script type="text/javascript" src="static/js/dapqa.js"></script>
<script type='type/javascript'>
  var ifu = {};
  $(function() {
    var ifuid = $('.galinfo').attr('id');
    ifu = new Ifu(ifuid);
    ifu.print();
    ifu.dapqa.print();
    ifu.dapqa.addComments('submit'); //test
  });
</script>

<body>
   <button type='button' class='btn btn-primary btn-lg' id='dapqasubmit' onclick='ifu.dapqa.addComments("submit")'>Submit</button>
</body>

然后我通过在每个类中运行一些测试打印功能来检查事情。我还在测试对 Dapqa 对象上的函数 addComments 的调用。这个函数看起来像

Dapqa.prototype.addComments = function(action) {
    console.log('adding comments',action);
};

当我加载页面时，控制台输出看起来不错。

We are now printing ifu  9101
We are now printing dapqa info:  9101 sampletab
adding comments submit

但是，当我单击表单上的提交按钮时，我收到了错误

TypeError: ifu.dapqa is undefined

现在我认为我通过将 ifu 声明为全局变量来解决这个问题，然后在页面完成加载后填充该变量，但显然不是。奇怪的是，这对于我的 Dapqa 对象中的另一个函数非常有效。我有一个单独的函数

 Dapqa.prototype.loadImageModal = function(img) {
    var src = $('#'+img).attr('src');
    var name = src.slice(src.search('manga-'));
    this.imagemodaltitle.html(name);
    var image = '<img class="img-responsive img-rounded" src="'+src+'" alt="Image"/>';
    this.imagemodalbody.html(image);
};

我也从我的 html 中的锚点调用它，例如

<a href='#' data-toggle='modal' data-target='#dapimgmodal_9101' onclick='ifu.dapqa.loadImageModal("mapsimgs1_9101")'><img src="" class="img-responsive img-rounded" id='mapsimg1_9101' alt="Image"></a>

这部分代码运行良好。所以我不明白为什么定义了一个函数而没有定义另一个函数。对此有什么想法吗？

更新我的按钮似乎有问题。我用锚点尝试过，它似乎有效。

<a type='button' class='btn btn-primary btn-lg' id='daptestsubmit' onclick='ifu.dapqa.addComments("submit")'>TestSubmit</a>

我不知道为什么。知道为什么锚可以工作而不是按钮吗？我正在使用 Boostrap 3.3.2。

【问题讨论】：

对我来说似乎工作正常：jsfiddle.net/p3rpL5wj
这真的很奇怪。它对我不起作用。我已经重新启动浏览器并清除了缓存。没有变化。
你知道为什么它不适合我吗？
如果我发布的 JSFiddle 示例对您有用，那么问题中缺少信息。如果还是不行，你用的是什么浏览器？
是的，JsFiddle 确实对我有用。我在 Chrome 和 Firefox 中都试过了，但都失败了。我不确定可能会丢失哪些信息。我在 html 布局方面稍微简化了示例。由于它位于 Flask webapp 中，因此 html 分层在一堆 jinja2 模板和宏中。不过我认为这并不重要，因为最终它们都会一起渲染。

标签： javascript jquery html object

【解决方案1】：

也许您应该更改脚本 ifu.js 和 dapqa.js 声明的顺序。由于 dapqa.js 显然依赖于 ifu.js，所以首先应该像这样加载它：

<script type="text/javascript" src="static/js/dapqa.js"></script>
<script type="text/javascript" src="static/js/ifu.js"></script>

【讨论】：

是的，我注意到了。我切换了它们，因此它们现在具有正确的顺序，但这并没有解决问题。 :(