Question

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>

任何人都可以告诉我上面代码中的问题请纠正我..

Answer 1

您的代码存在多个问题，导致其无法在某些浏览器中运行或在其他浏览器中无法正常工作：

onmouseover / onmouseout事件分配为属性的处理程序不是也不应该复制克隆（在任何浏览器中根据DOM规范），这就是你没有看到的原因任何浏览器中的文字下划线效果
在Internet Explorer（IE9之前）中，无法通过使用setAttribute方法设置onxxx属性来分配事件处理程序
您使用id属性克隆HTML结构并将其插入到同一文档中，这会产生重复ID的问题 - 这是“非法”并且可能导致不可预测的行为

因此，在每个浏览器中开始正常工作的代码的唯一解决方案是克隆没有id的片段和（重新）手动分配事件处理程序。

Answer 2

我同意@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取出了深层副本，重新构建了一些代码，并添加了一些特定于浏览器的代码。

在克隆过程中无法在IE中触发事件

2 个答案: