Javascript dojo函数在标记中不起作用

大家好，我正在学习基于dojo的node.js，当时我正在执行一个ajax创建的表到字符串

表中有一行插入了一个链接，以便调用函数

但是，当我点击一个链接时，这个功能就不起作用了

错误消息->未捕获引用错误：未定义func

请帮帮我

my board.html

   require([ "dojo/parser","dojo/dom", "dojo/on", "dojo/request", "dojo/json","dojo/_base/array"
          ,"dijit/Dialog","dijit/form/Button","dijit/form/CheckBox","dijit/layout/BorderContainer",
        "dijit/layout/TabContainer", "dijit/layout/ContentPane",
        "dojo/domReady!" ], function(parser,dom,on,request,json,arrayUtil,Dialog,Button,CheckBox) {
    parser.parse();
    .....
    function func(no){
       alert('seq:'+no);
    }
    var xhrArgs = {
                url: '/getData',
                handleAs: "json",
                load: function(data){
                     var output ='';
                        output+='<table  class="output" cellspacing="0" cellpadding="0" border="1">';
                        output+='<thead>';
                        output+='<tr><th>NO</th><th>NAME</th><th>FORM</th><th>DESCRIPTION</th><th>WRITER</th>';
                        output+='</tr>';
                        output+='</thead>';
                        output+='<tbody>';
                      arrayUtil.forEach(data,function(item,i){
                            output+='<tr>';
                            output+='<td>'+item.seq+'</td>';
                            output+='<td>'+item.name+'</td>';
                            output+='<td><a href="#" onclick="func('+item.seq+');return false;">'+item.form+'</a></td>';
                            output+='<td>'+item.desc+'</td>';
                            output+='<td>'+item.writer+'</td>';
                            output+='</tr>';
                      });//end for
                      output+='</tbody>';
                      output+='</table>';
                      resultDiv.innerHTML = output; 
               },//end load
             ......

require（[“dojo/parser”、“dojo/dom”、“dojo/on”、“dojo/request”、“dojo/json”、“dojo/_base/array”）
“dijit/Dialog”、“dijit/form/Button”、“dijit/form/CheckBox”、“dijit/layout/BorderContainer”，
“dijit/layout/TabContainer”、“dijit/layout/ContentPane”，
“dojo/domReady！”]，函数（解析器、dom、on、请求、json、arrayUtil、对话框、按钮、复选框）{
parser.parse（）；
.....
函数func（否）{
警报（“序号：”+否）；
}
变量xhrags={
url:“/getData”，
handleAs：“json”，
加载：函数（数据）{
var输出=“”；
输出+=''；
输出+=''；
输出+='NONAMEFORMDESCRIPTIONWRITER'；
输出+=''；
输出+=''；
输出+=''；
arrayUtil.forEach（数据、功能（项目，i）{
输出+=''；
输出+=''+项。序号+''；
输出+=''+项。名称+''；
输出+=''；
输出+=''+项描述+''；
输出+=''+项。编写器+''；
输出+=''；
})；//结束
输出+=''；
输出+=''；
resultDiv.innerHTML=输出；
}，//端部载荷
......

这是因为

func（）

函数在

require（）

回调函数中是局部作用域。这意味着您无法看到它，除非您是从

require（）

回调函数内部调用该函数

但是，onclick属性只能访问全局范围，因此在您当前的情况下，它不能执行

func（）

，这就是为什么它会给出未定义的错误

要解决此问题，您可以做两件事：

将

func（）

移动到全局范围

将事件处理移动到本地

require（）

范围

---

将

func（）

移动到全局范围 要将函数移动到全局范围，应将函数重写为：

func = function(no){
   alert('seq:'+no);
}

因为前面没有

var

，所以它实际上应用于全局范围。您还可以编写以下内容：

window.func = function(no){
    alert('seq:'+no);
}

这是最简单的解决方案，但也是最难看的解决方案。通常建议尽可能少地使用全局范围，在这种情况下，这并不是真正必要的

将事件处理移动到本地

require（）

范围 一个更好的解决方案（我认为）是将事件处理移动到与函数所在的相同的本地范围。但是，要做到这一点，您不能使用现在使用的相同策略。您必须使用dojo/DOM construct模块构造适当的DOM节点来替换

output

DOM字符串

例如：

var table = domConstruct.create('table', {
    class: "output",
    cellspacing: 0,
    cellpadding: 0,
    border: 1
});
domConstruct.place('<thead>' +
    '<tr><th>NO</th><th>NAME</th><th>FORM</th><th>DESCRIPTION</th><th>WRITER</th>' +
    '</tr>' +
    '</thead>', table);
var body = domConstruct.create("tbody");
arrayUtil.forEach(data, function(item,i){
    var row = domConstruct.create("tr");
    domConstruct.place('<td>'+item.seq+'</td>', row);
    domConstruct.place('<td>'+item.name+'</td>', row);
    var cell = domConstruct.create('td');
    domConstruct.place(cell, row);
    var link = domConstruct.create("a", {
        href: "#",
        innerHTML: item.form
    });
    on(link, "click", function() {
        func(item.seq);
        return false;
    });
    domConstruct.place(link, cell);
    domConstruct.place('<td>'+item.desc+'</td>', row);
    domConstruct.place('<td>'+item.writer+'</td>', row);
    domConstruct.place(row, body);
});
domConstruct.place(body, table);
domConstruct.place(table, resultDiv);

var table=domConstruct.create（'table'）{
类：“输出”，
单元间距：0，
单元格填充：0，
边界：1
});
domConstruct.place（“”）+
“NONAMEFORMDESCRIPTIONWRITER”+
'' +
“（表1）；
var body=domConstruct.create（“tbody”）；
arrayUtil.forEach（数据、功能（项目，i）{
var row=domConstruct.create（“tr”）；
domConstruct.place（“”+项目序号+“”，第行）；
domConstruct.place（“”+item.name+“”，行）；
var cell=domConstruct.create（'td'）；
domConstruct.place（单元格、行）；
var link=domConstruct.create（“a”{
href:“#”，
innerHTML:item.form
});
打开（链接，“单击”，函数（）{
func（项目序号）；
返回false；
});
domConstruct.place（链接、单元）；
domConstruct.place（“”+项目描述+“”，第行）；
domConstruct.place（“”+item.writer+“”，第行）；
位置（行、正文）；
});
位置（身体、桌子）；
domConstruct.place（表，resultDiv）；

这段代码替换整个DOM构造。它创建DOM节点，并使用dojo/on模块添加

func

函数作为onClick事件的事件处理程序

我还做了一个演示此解决方案的示例

这有几个好处：

• 您的

  func（）

  仅在必须可用时可用。没有人可以通过在全局范围中使用同名变量来重写它
• 您可以看到，我在JavaScript部分使用的HTML代码更少，在HTML部分使用的JavaScript函数也更少（不再需要

  onclick

  属性）。如果您进一步改进这一点，您可以将HTML代码和JavaScript代码解耦，从而改进应用程序的结构

---

您是否尝试过使用dojo数据道具（如output+=''）调用函数？