Question

当我通过JavaScript将以下代码插入到我的HTML中时，onclick事件不起作用（load_menu未运行）。但是，当我手动插入此代码时，它可以正常工作。

<li class="dropdown">
    <a href="#" onclick="load_menu('dropdown-menu',10001)" data-toggle="dropdown">رباتیک<i class="icon-arrow open"></i></a>
    <ul class="dropdown-menu show" id="10001">
    </ul>
</li>

javascript代码：

function load_menu(m,id) {
var t = 1000;
if (m == 'dropdown') {
    if ($('div.container ul li[class="dropdown"]').length == 0) {
        loadXMLDoc("GET", "ContainerMenu.aspx?m=" + m + "&id=" + id, function (result) {
            document.getElementById(id).innerHTML = result;

            toggle_menu();
        });

    }
}
if (m == 'dropdown-menu') {
    if ($('div.container ul li ul[class="dropdown-menu"]').length == 0) {
        loadXMLDoc("GET", "ContainerMenu.aspx?m=" + m + "&id=" + id, function (result) {
            document.getElementById(id).innerHTML = result;

            toggle_menu();
        });

    }
}

}

为什么会发生这种情况，我该如何解决？

Answer 1

document.body.innerHTML='<li class="dropdown"><a href="#" onclick="load_menu('dropdown-menu',10001)" data-toggle="dropdown">رباتیک<i class="icon-arrow open"></i></a><ul class="dropdown-menu show" id="10001"></ul></li>'

http://jsfiddle.net/955uM/ 你会注意到＆＃39;下拉菜单＆＃39;未突出显示且未包含在字符串中。请改用：

document.body.innerHTML='<li class="dropdown"><a href="#" onclick="load_menu('+"'dropdown-menu'"+',10001)" data-toggle="dropdown">رباتیک<i class="icon-arrow open"></i></a><ul class="dropdown-menu show" id="10001"></ul></li>'

Answer 2

当代码中创建的html元素的onclick不会触发时，我遇到了这个问题。在下面的示例代码中，代码中创建的按钮显示但单击时没有任何反应

<html> 
<head>
<script language="javascript"> 
   alert("page is loading");
   function createbuttonincode() {
      var div=document.getElementById("testdiv");
      var button = document.createElement("button");
      var buttononclickstring = "javacript:testbuttonclick()";
      button.setAttribute ("onclick",  buttononclickstring);
      button.innerHTML = "button created by code";
      div.appendChild(button);
   }
   function testbuttonclick()
   {
       alert("button click event fired");
   }
</script> 
</head>
<body> 
<form> 
   <input type=button onclick="javascript:createbuttonincode()"  value="Create new button"/> 
<div id="testdiv"></div>
</form> 
</body>

但是如果我添加这个元标记

<meta http-equiv="X-UA-Compatible" content="IE=edge">

在头部

然后触发动态创建的事件上的click事件，我看到警报。

这似乎不是Edge浏览器的问题

动态插入元素的Onclick事件不会触发

2 个答案: