未从超链接调用 Javascript

Question

我正在使用 Google Apps 脚本创建一个包含多个超链接的网络应用程序。单击超链接时，它应该会触发一个警告框(只是填充代码以查看是否正在调用 JS 函数)。我的超链接是使用这个 javascript 函数生成的:

function updateAlertList(results) {

    var div = document.getElementById('output');
    div.innerHTML = '';

    for (var i=0;i<results.length;i++)
    { 
        div.innerHTML += '<p><a class="ra-button" href="javascript:void(0)" onclick="myJsFunc()">' + results[i].alertName + '</a></p>';
    }
}

生成警报的 JS 函数是:

function myJsFunc(){
    alert('this function was called');
}

由于某些原因，只有超链接列表中的最后一个超链接会触发名为 myJsFunc 的 JS 函数。每当我单击列表前面的任何其他超链接时，都不会调用 JS 函数。当我查看 Chrome 开发者工具的控制台时，我看到错误“无法读取未定义的属性‘plugin_dispatchEvent___’”

有人知道为什么我的超链接列表中的最后一个超链接有效..但较早的超链接无效吗？

Answer 1

我会将您的代码更改为:

function updateAlertList(results) {

  var div = document.getElementById('output');
  div.innerHTML = '';

  var alrtInnrHTML = '';

  for (var i=0;i<results.length;i++) {
    alrtInnrHTML += '<p><a class="ra-button" href="javascript:void(0)" onclick="myJsFunc()">' + results[i].alertName + '</a></p>';
    console.log('alrtInnrHTML: ' + alrtInnrHTML);
    }
}

div.innerHTML = alrtInnrHTML;

请注意，我创建了一个变量 alrtInnrHTML ，并使用 +=在变量上，而不是 innerHTML。 您正在尝试使用 +=在 DOM 操作上而不是变量。首先设置 HTML 文本字符串，然后一次性注入(inject)整个字符串。现在，您正在一遍又一遍地将 HTML 注入(inject)同一个 DIV。所有链接都显示了吗？在任何情况下，即使您的逻辑正常工作，我也会将逻辑更改为我建议的内容，使用 console.log() 检查最终的 HTML 内容是否正确。输出，然后一次性注入(inject) HTML。

您实际上最好添加个人 <p>和 <a>在每个循环中添加标签，并在每个循环中添加 HTML，而不是尝试构建 HTML 字符串。

您可能需要阅读以下内容:

• insertRow
• insertCell
• setAttribute
• textContent
• createTextNode
• appendChild
• createElement

使用这些方法，您可以在很大程度上避免编写长 HTML 字符串。 例如，您可以创建一个表，每个结果都有一个新行。

for (var i=0;i<results.length;i++) { 
  window.row1 = tblAlertList.insertRow(-1);
  window.cell1 = row1.insertCell(0);
  row1.setAttribute("class", "ra-button");
  row1.innerHTML = <p><a class="ra-button" href="javascript:void(0)" onclick="myJsFunc()">' + results[i].alertName + '</a></p>';
}

上面的代码只是为了让你知道你可以做什么，它不是工作代码。

您可以创建一个无序列表，而不是创建一个表:<ul>

div.innerHTML = "<ul><a></a></ul>";

然后将一个子节点附加到列表中的最后一个节点:

var node=document.createElement("LI");
var textnode=document.createTextNode("New Alert");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);