Question

我需要在innerHTML内部调用一个函数，这是我的尝试，但不起作用。

category.find({}, function(err, docs) {
    docs.forEach(function(d) {
          var id = d._id
          document.getElementById('result').innerHTML += '<li onclick=insert(id)>' + d.name + '</li>'
    })
})

function insert(id){
  alert(id + "Inserted")
}

这是HTML部分：

<div id="result"></div>

Answer 1

onclick属性中的变量是在全局范围内评估的，您不能引用局部变量。您需要将字符串中的id替换为id变量的实际值。您可以使用模板文字来实现。

const docs = [{
  id: "FgrbV2NTp72ie6xj",
  name: "Joe"
}, {
  id: "agfadsfasdfq23",
  name: "Fred"
}];

docs.forEach(function(d) {
  document.getElementById('result').innerHTML += `<li onclick="insert('${d.id}')">${d.name}</li>`
});

function insert(id) {
  alert(id + " Inserted")
}

<ul id="result"></ul>

Answer 2

const docs = [{
  id: "FgrbV2NTp72ie6xj",
  name: "Joe"
}, {
  id: "agfadsfasdfq23",
  name: "Fred"
}];
let d = document;
d.g = d.getElementById;
let res = d.g('result');

let fragment = new DocumentFragment();
let el = null;
docs.forEach(function(item) {
  el = document.createElement('li');
  el.innerText = `${item.name}`;
  el.onclick = function(){
     alert(`${item.id}` + " Inserted");
  };
  fragment.appendChild(el);
});

res.appendChild(fragment);

ul{
cursor:default;
}

<ul id="result"></ul>

根据here的讨论者，innerHTML很容易使用：

...通常，.innerHTML用于将HTML的小片段插入并解析到文档中..

因此，此解决方案不是通过解决DOM对innerHTML的查询，而是通过利用DOM操作有目的地避免了它，同时使所需的功能可用作元素。为达到此目的，代码创建了document fragment object。结果，该代码能够添加LI元素以及每个元素的ID，并可以在docs.forEach()调用的函数中设置每个元素的onclick事件属性。另外，当用户单击“ Joe”或“ Fred”时，我添加了一些CSS来增强光标。

在innerHTML内部调用一个函数

2 个答案: