無法克隆

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

回答

相關問題