вызвать функцию внутри innerHTML - PullRequest
Новая
       12

вызвать функцию внутри innerHTML

2 голосов
/ 10 марта 2019

Мне нужно вызвать функцию из 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>

Ответы [ 2 ]

3 голосов
/ 10 марта 2019

Переменные в 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>
0 голосов
/ 10 марта 2019 

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>

Хотя innerHTML прост в использовании, по словам участника дискуссии здесь :

... в общем случае .innerHTML предназначен для вставки и анализа в документ небольших фрагментов HTML.

Таким образом, вместо решения запроса OP относительно innerHTML, этоРешение намеренно избегает этого, используя манипуляции с DOM, и в то же время делает желаемую функцию доступной в качестве обработчика для события onclick элемента

.Для этого в коде создается объект фрагмента документа .В результате код может добавлять элементы LI, а также идентификатор каждого из них и устанавливать свойство события onclick для каждого в функции, вызываемой docs.forEach().Кроме того, я добавил немного CSS для улучшения курсора, когда пользователь нажимает «Джо» или «Фред».
...