未从超链接调用 Javascript答案

【问题标题】：Javascript not being called from hyperlink未从超链接调用 Javascript
【发布时间】：2014-06-09 03:52:56
【问题描述】：

我正在使用 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');
}

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

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

【问题讨论】：

您可以先尝试对其进行硬编码，然后确定是否可行吗？

标签： javascript html css web-applications google-apps-script

【解决方案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 文本字符串，然后一次性注入整个字符串。现在，您一遍又一遍地将 HTML 注入到同一个 DIV 中。所有链接都显示了吗？在任何情况下，即使您的逻辑有效，我也会将逻辑更改为我所建议的，检查最终的 HTML 内容是否正确并使用console.log() 输出，然后一次性注入所有 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);

【讨论】：