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

【问题标题】：Onclick event on dynamically inserted elements doesn't trigger动态插入元素上的 Onclick 事件不会触发
【发布时间】：2014-09-13 16:40:45
【问题描述】：

当我通过 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();
            });
            
        }
    }
}

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

【问题讨论】：

你的JS是什么？我们需要先看到这一点，然后才能尝试帮助您......
你使用的 JavaScript 代码更重要。请在其中编辑。
确保你有一个 js 函数，它接受 2 个名为 load_menu 的变量。如果是外部的，请确保正确导入，您可以先将函数移动到本地进行测试。
所以...您正在向我们展示工作版本并询问我们为什么非工作版本（您没有向我们展示）不起作用？
不确定他们为什么要依赖 js。这应该在服务器端（最好）或硬编码 -.-

标签： javascript html jquery dynamic jquery-events

【解决方案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/ 您会注意到“下拉菜单”未突出显示且未包含在字符串中。改用这个：

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>'

【讨论】：

首先显示下拉菜单，然后点击显示下拉菜单

【解决方案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">

在头部，然后触发动态创建的事件上的点击事件，我看到了警报。

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

【讨论】：