動態插入的元素上的 Onclick 事件不會觸發

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/您會注意到“下拉菜單”沒有突出顯示，也沒有包含在字符串中。 改用這個：

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

在頭部然后動態創建的事件上的點擊事件觸發，我看到警報。

似乎這不是 Edge 瀏覽器的問題

動態插入的元素上的 Onclick 事件不會觸發

問題描述

2 個解決方案

解決方案1
0 2014-07-22 18:12:39

解決方案2
0 2017-11-17 19:22:00

動態插入的元素上的 Onclick 事件不會觸發

問題描述

2 個解決方案

解決方案1 0 2014-07-22 18:12:39

解決方案2 0 2017-11-17 19:22:00

解決方案1
0 2014-07-22 18:12:39

解決方案2
0 2017-11-17 19:22:00