在js的子菜单中添加function

Question

I am having trouble adding a function to a submenu created with js.

content2 +="<li class=\"myclass\" ><a href=\"#\" onclick=\"myfuncion();\">  hi </a></li>";  


function myfuncion(){

  alert("asdsadas")

}

The issue is that I have changed the quotes and everything but I can't solve it.

I have attached an image so you can see the error.

If someone can guide me I would appreciate it.

Thank you very much.

//upgrade:

what I need through myFunction () is to pass variables, to load a web page in an iframe.

example:

content2 +="<li class=\"myclass\" ><a href=\"#\" onclick=\"myfuncion("www.google.com");\">  hi </a></li>";  


function myfuncion(web){

var srcstring = web;
document.getElementById('iframe').src = srcstring;

}

Answer 1

The linter cannot see it is called in the string. Why not delegate?

document.getElementById("ulID").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.tagName.toUpperCase() === "A" && tgt.closest("li").classList.contains("myclass")) {
    myFuncion(tgt.dataset.web);
  }
})

Also use data-attributes. I assume you have a { "web": "some web address" } in your object

document.getElementById("ulID").innerHTML = obj
  .filter(item => item.gid === '2' && item.active === '1')
  .map(item => `<li class="myclass"><a href="#" data-web="${item.web}">${item.web}</a></li>`);

Answer 2

I'd recommend using the below implementation. it works for anything rendered on/after page load.

$(document).on("click",".myclass",function(){
    myfuncion();
});

To render UI elements I recommend using https://json2html.com/