Javascript 如何在json2html中使用onclick

我正在使用JSON2HTML库生成HTML。我发现onclick有问题

**JavaScript**
var数据=[
{         
“测试套件”：[
{
“测试用例”：[
{
“testCaseName”：“登录成功TC（嵌套错误）”，
“testCaseResult”：“false”，
“TestCase截图”：“图像”，
“TestCaseTimstamp”：“0:00:13.258”，
“测试步骤”：[
{
“testStepresult”：“true”，
“testStepName”：“ub_cti_inputText-TC（嵌套错误）”，
“testStepScreenShot”：“图像”，
“testStepTimeStamp”：“0:00:13.258”，
},
{
“testStepresult”：“true”，
“testStepName”：“ub_cti_InputText1111111-TC（嵌套错误）”，
“testStepScreenShot”：“图像”，
“testStepTimeStamp”：“0:00:13.258”，
},
{
“testStepresult”：“false”，
“testStepName”：“ub_cti_inputText-TC（嵌套错误）”，
“testStepScreenShot”：“图像”，
“testStepTimeStamp”：“0:00:13.258”，
}
]//测试步骤结束
},    			   
]，//testSuite1结束
“testSuiteName”：“LoginAndTicketStatus_套件-TS（嵌套错误）”，
“testSuiteResult”：“false”，
“testSuiteTimeStamp”：“0:00:15.238”
},
]//TestSuite JSON结束
},
]; //数据结束
变量转换={
“测试套件”：{
“标签”：“ul”，
“子对象”：函数（）{
返回（json2html.transform（this.testSuite，transform.getTestSuiteName））；
}
},
“getTestSuiteName”：{
“tag”：“li”，
“nowrap”：“正确”，
“类”：“已关闭”，
“儿童”：[
{“tag”：“a”，“href”：“#testSuiteLink”，
“onclick”：
函数（）
{
$（this.toggleClass（'closed'）；
$（this.toggleClass（'open'）；
切换（此）；
},
“儿童”：[
{“tag”：“big”，
“儿童”：[
//为testSuite的结果应用字体颜色
{“标记”：“字体”，
“颜色”：函数（）
{
如果（数据[0].testSuite[0].testSuiteResult==“true”）
{
返回“绿色”；
}
其他的
{
返回“红色”；
}    				
},
“html”：“${testSuiteName}”，
},
]
}]
},
{“tag”：“ul”，“children”：function（）
{
返回（json2html.transform（this.testCase，transform.testCase））；
}
}]	  		
},
“测试用例”：{
“tag”：“li”，
“nowrap”：“正确”，
“类”：“已关闭”，
“儿童”：[
{
“tag”：“a”，“href”：“#testcase”，“onclick”：function（）
{
$（this.toggleClass（'closed'）；
$（this.toggleClass（'open'）；
切换（此）；
},
“儿童”：[
{“tag”：“big”，“children”：[
{“标记”：“字体”，“颜色”：函数（）
{    				
if（this.testcasesult==“true”）
{
返回“绿色”；
}
其他的
{
返回“红色”；
}    				
}，“html”：函数（）
{
返回this.testCaseName；
}}
]}
]},
{“tag”：“ul”，“children”：function（）
{
返回（json2html.transform（this.testStep，transform.testStep））；
}
}]
},
“测试步骤”：{
“tag”：“li”，
“nowrap”：“正确”，
“类”：“已关闭”，
“onclick”：函数（）
{
$（this.toggleClass（'closed'）；
$（this.toggleClass（'open'）；
切换（此）；
},
“儿童”：[
{“tag”：“a”，“href”：“#testcase”，“onclick”：function（）
{
$（this.toggleClass（'closed'）；
$（this.toggleClass（'open'）；
切换（此）；
},
“儿童”：[
{“tag”：“big”，“children”：[
{“标记”：“字体”，“颜色”：函数（）
{    			
if（this.testStepresult==“true”）
{
返回“绿色”；
}
其他的
{
返回“红色”；
}
}，“html”：函数（）
{
对于（本文件中的元素）{
日志（“接收元素”+元素+“----44”）；
返回this.testStepName；
}
}
}
]}
]}    							  ,
{“tag”：“ul”，“children”：[
{
“标签”：“li”，“nowrap”：“真”，“类”：“关闭”，“子项”：[
{
“tag”：“a”，“href”：“#step”，“onclick”：function（）
{
$（this.toggleClass（'closed'）；
$（this.toggleClass（'open'）；
切换（此）；
}“儿童”：[
{“tag”：“big”，“children”：[
{“标记”：“字体”，“颜色”：函数（）
{   				
if（this.testStepresult==“true”）
{
返回“绿色”；
}
其他的
{    					
返回“红色”；
}
}，“html”：函数（）
{
返回此.testStepresult；
}
}
]}
]}
]}
]}
]},    	
}; //HTML模板定义结束（转换）
$（文档）.ready（函数（）
{
$（'#json'）.json2html（数据，transform.testSuite）；
});
**Css样式**
正文{font-family:monospace；}
ul报告，
报告，
ul.report li{margin:0；padding:0；}
ul.report ul{padding left:1em；}
ul.li报告{文本装饰：无；}
a{
文字装饰：无；
}
李：以前{
内容：“⊞"
}
ul.report li{列表样式：无；}
{
列表样式类型：无；
}

**HTML**
首先，您可能希望尝试将JSON转换组织为更可读的格式

现在回答您的问题，因为您将核心json2html.transform嵌套在转换中，所以您需要确保它知道如何处理事件

return (json2html.transform(this.testSuite, transform.getTestSuiteName,{'events':true}));

这将告诉核心库处理jquery events.Ot
return ($('div').json2html(this.testSuite, transform.getTestSuiteName));

var transform = {
    "testSuite": {
        "tag": "ul",
        "children": function () {
        return ($('div').json2html(this.testSuite, transform.getTestSuiteName));
        }
    },
        "getTestSuiteName": {
        "tag": "li",
        "nowrap":"true",
        "class":"closed",
      "children":[
          {"tag":"a","href":"#testSuiteLink",
                     "onclick":
        function()
        {
            $(this).toggleClass('closed');
            $(this).toggleClass('open');
            toggle(this);
        },
         "children":[
           {"tag":"big",
            "children":[
            //Apply font color for result of testSuite
                {"tag":"font",                  
                "color":function()
                {
    if(data[0].testSuite[0].testSuiteResult=="true")
        {
        return "Green";
        }
        else
        {
        return "red";
        }                   
        },
        "html": "${testSuiteName}",
        },
        ]
        }]
        },
    {"tag":"ul","children":function()
         {
        return ( json2html.transform(this.testCase, transform.testCase,{'events':true}));
        }
        }]          
        },

    "testCase": {
       "tag": "li",
       "nowrap":"true",
       "class":"closed",         
        "children":[
        {
        "tag":"a","href":"#testcase","onclick": function()
        {
        $(this).toggleClass('closed');
        $(this).toggleClass('open');
        toggle(this);
        },
        "children":[
           {"tag":"big","children":[
           {"tag":"font","color":function()
         {                  
         if(this.testCaseResult=="true")
          {
            return "Green";
         }
            else
            {
            return "red";
            }                   
        },"html":function()
            {
            return this.testCaseName;
            }}
           ]}
         ]},
        {"tag":"ul","children":function()
         {
    return (  json2html.transform(this.testStep, transform.testStep,{'events':true}) );
        }
      }]
    },

    "testStep": {
        "tag": "li",
        "nowrap":"true",
        "class":"closed",

        "onclick":function() {
            console.log('here');
            $(this).toggleClass('closed');
            $(this).toggleClass('open');
            toggle(this);
        },
         "children":[
           {"tag":"a","href":"#testcase","onclick": function()
            {
            $(this).toggleClass('closed');
            $(this).toggleClass('open');
            toggle(this);
            },
            "children":[
                {"tag":"big","children":[
                {"tag":"font","color":function()
                {               
                if(this.testStepresult=="true")
                {
                return "green";
                }
                else
                {
                    return "red";
                }

                },"html":function()
                {
                for(element in this) {
            console.log("Element received "+element+" -----44");
            return this.testStepName ;
            }
           }
         }
       ]}
     ]}                               ,
    {"tag":"ul","children":[                                    
    {
     "tag":"li","nowrap":"true","class":"closed","children":[
    {
      "tag":"a","href":"#step","onclick":function()
    {
        $(this).toggleClass('closed');
        $(this).toggleClass('open');
        toggle(this);
        },"children":[
        {"tag":"big","children":[
        {"tag":"font","color":function()
        {                   
          if(this.testStepresult=="true")
            {
               return "Green";
            }
        else
        {                       
            return "red";
        }
        },"html":function()
        {
              return this.testStepresult  ;
        }
            }
           ]}
          ]}
         ]}
        ]}
      ]},       
  }; //End of HTML template definition(transform)