Question

我写了以下JS代码：

function downloadFile(dataItem) {
    ....
}
....
for (var r = 0; r < dataItems.length ; r++) {
    table += '<tr>';
    var listOfAttributes = ['CarModel', 'BusMapping', 'Date_', 'Location_', 'Comments', 'AttackTraffic', 'IsTagged']
    **table +='<td> <a onclick="downloadFile(dataItems[r])" href="#">' + dataItems[r]['FileName']['S'] +'</a></td>';**
    for (var c = 0; c < Object.keys(dataItems[0]).length-1 ; c++) {
        table +='<td>' + dataItems[r][listOfAttributes[c]]["S"] +'</td>';
    }
    table+= '</tr>'
}

我收到该行的错误：

table +='<td> <a onclick="downloadFile(dataItems[r])" href="#">' + dataItems[r]['FileName']['S'] +'</a></td>';

似乎JS无法解决变量＆＃39; dataItems＆＃39;在-tag中：

<a onclick="downloadFile(dataItems[r])" href="#">.

但是，稍后在同一行中，JS成功解析了该部分的相同名称：

+ dataItems[r]['FileName']['S'] +

您认为这可能是什么问题？如何在-tag内部解析dataItem？

Answer 1

您的变量位于字符串中。尝试将代码更改为：

table +='<td> <a onclick="' + downloadFile(dataItems[r]) + '" href="#">' + dataItems[r]['FileName']['S'] +'</a></td>';**

Answer 2

在这一行

<a onclick="downloadFile(dataItems[r])" href="#">

除非dataItems是一个全局变量，否则它将无法用于进行此调用downloadFile(dataItems[r])的环境，因为onclick事件将在全局范围内调用。

你需要以这种方式更少干扰地绑定事件

//you need to update the selector as per your markup
document.querySelector ( "tr td a" ).addEventListener( "click", function(){
  downloadFile(dataItems[r]);
})

Answer 3

当您在元素属性中放置一个字符串时，它不会被识别为JavaScript代码或JavaScript函数，因此请放置JavaScript函数。

所以你可以做，var anchor = '<a href="#" onclick="' + your_func_here + '"></a>';

说明问题的示例示例，在此示例中，如果您将函数名称作为字符串写入onclick属性，则函数将不会被调用。

＆＃13;

var container = document.getElementById('container');
var element = document.createElement('a');
element.href = '#';
element.text = 'Fire!';
element.onclick = fire; // this invokes the fire function
// element.onclick = 'fire'; // this won't invoke the fire function
container.appendChild(element);

function fire() {
  console.log('fired');
}

＆＃13;

<div id="container">
</div>

＆＃13;

JavaScript：变量名未解析

3 个答案: