无法克隆

Following is the code which will clone a set of div with their events(onclick) which is working fine for FF but in case of IE it is not firing events associated with each div. 


<html> 
    <head> 
    <style type='text/css'> 
    .firstdiv{ 
     border:1px solid red; 
    } 
    </style> 

    <script language="JavaScript"> 
    function show_tooltip(idx,condition,ev) { 
     alert(idx +"=="+condition+"=="+ev); 
    } 

    function createCloneNode() { 
     var cloneObj = document.getElementById("firstdiv").cloneNode(true); 
     document.getElementById("maindiv").appendChild(cloneObj); 
    } 
    function init(){ 
    var mainDiv = document.createElement("div"); 
    mainDiv.id = 'maindiv'; 
    var firstDiv = document.createElement("div"); 
    firstDiv.id ='firstdiv'; 
    firstDiv.className ='firstdiv'; 
    for(var j=0;j<4;j++) { 
     var summaryDiv = document.createElement("div"); 
      summaryDiv.id = "sDiv"+j 
      summaryDiv.className ='summaryDiv'; 
      summaryDiv.onmouseover = function() {this.setAttribute("style","text-decoration:underline;cursor:pointer;");} 
      summaryDiv.onmouseout = function() {this.setAttribute("style","text-decoration:none;");} 
      summaryDiv.setAttribute("onclick", "show_tooltip("+j+",'view_month',event)"); 
      summaryDiv.innerHTML = 'Div'+j; 
      firstDiv.appendChild(summaryDiv); 
    } 

    mainDiv.appendChild(firstDiv); 
    var secondDiv = document.createElement("div"); 
    var linkDiv = document.createElement("div"); 
    linkDiv.innerHTML ='create clone of above element'; 
    linkDiv.onclick = function() { 
     createCloneNode(); 
    } 
    secondDiv.appendChild(linkDiv); 
    mainDiv.appendChild(secondDiv); 
    document.body.appendChild(mainDiv); 
    } 
    </script> 
    </head> 
    <body> 
    <script language="JavaScript"> 
    init() 
    </script> 
    </body> 
    </html>

有谁能够告诉我什么在上面的代码中的问题请指正期间触发IE事件..无法克隆

来源

2010-05-01 Abhimanyu

你必须与你的代码的多个问题，使其要么没有在某些浏览器或工作在其他部分的工作：被指定为性能

的onmouseover/onmouseout事件处理程序做也不应被copyied时克隆（在根据DOM规范的任何浏览器），这就是为什么你不看到在任何浏览器
在Internet Explorer（之前IE9）文字下划线效果，不可能通过设置onxxx属性具有的setAttribute方法来分配事件处理程序
你克隆与ID属性，并插入一个HTML结构它在其中创建重复的ID的问题相同的文档 - 这是“非法的”，可能会导致不可预知的行为

因此，对于您的代码开始在每个浏览器正常工作，唯一的办法就是克隆片段没有IDS和（重新）手动分配事件处理程序。

来源

2010-05-04 18:07:14

我同意@Sergey Ilinsky。您首先要了解IE和FF之间的DOM差异。

试试这个代码，它应该有所帮助。

<html> 
    <head> 
    <style type='text/css'> 
    .firstdiv{ 
     border:1px solid red; 
    } 
    </style> 

    <script language="JavaScript"> 

    var cloneCount = 0; 
    var bname = navigator.appName; 
    var isIE = false; 
    if (bname == "Microsoft Internet Explorer"){ 
     isIE = true; 
    } 
    else{ 
     isIE = false; 
    } 

    function show_tooltip(idx,condition,ev) { 
     alert(idx +"=="+condition+"=="+ev); 
    } 

    function createCloneNode() { 
     var cloneObj = document.getElementById("firstdiv").cloneNode(false); 
     cloneObj.id += cloneCount++; 
     createSummaryNodes(cloneObj); 
     document.getElementById("maindiv").appendChild(cloneObj); 
    } 

    function createSummaryNodes(firstDiv){ 
    for(var j=0;j<4;j++) { 
     var summaryDiv = document.createElement("div"); 
      summaryDiv.id = firstDiv.id+"sDiv"+j 
      summaryDiv.className ='summaryDiv'; 

      if(isIE){ 
       summaryDiv.onmouseover = function() {this.style.textDecoration="underline";this.style.cursor="pointer";} 
       summaryDiv.onmouseout = function() {this.style.textDecoration="none";} 
       summaryDiv.onclick = function() { show_tooltip(j,'view_month',event); }; 
      } 
      else{ 
       summaryDiv.onmouseover = function() {this.setAttribute("style","text-decoration:underline;cursor:pointer;");} 
       summaryDiv.onmouseout = function() {this.setAttribute("style","text-decoration:none;");} 
       summaryDiv.setAttribute("onclick", "show_tooltip("+j+",'view_month',event)"); 
      } 
      summaryDiv.innerHTML = 'Div'+j; 
      firstDiv.appendChild(summaryDiv); 
    } 
    } 

    function init(){ 
    var mainDiv = document.createElement("div"); 
    mainDiv.id = 'maindiv'; 
    var firstDiv = document.createElement("div"); 
    firstDiv.id ='firstdiv'; 
    firstDiv.className ='firstdiv'; 
    createSummaryNodes(firstDiv); 

    mainDiv.appendChild(firstDiv); 
    var secondDiv = document.createElement("div"); 
    var linkDiv = document.createElement("div"); 
    linkDiv.innerHTML ='create clone of above element'; 
    linkDiv.onclick = function() { 
     createCloneNode(); 
    } 
    secondDiv.appendChild(linkDiv); 
    mainDiv.appendChild(secondDiv); 
    document.body.appendChild(mainDiv); 
    } 

    </script> 
    </head> 
    <body> 
    <script language="JavaScript"> 
    init(); 
    </script> 
    </body> 
    </html>

编辑：我加了一些非常基本的浏览器检测，拿出深层副本cloneNode，重组一些代码，并添加了一些特定浏览器的代码。

来源

2010-05-06 20:07:07

回答

相关问题