ansaurus

Question

unable to trigger event in IE during cloning

Answer 1

A:

You have multiple problems with your code that make it either not working in some browsers or partial working in others:

onmouseover/onmouseout event handlers assigned as properties do not and shall not be copyied when cloning (in any browser according to DOM specification), that is why you do not see text-underline effect in any browser
In Internet Explorer (prior to IE9) it is not possible to assign an event handler by setting a onxxx attribute with setAttribute method
You clone an HTML structure with id attributes and insert it into the same document which creates a problem of duplicate id's - this is "illegal" and can lead to unpredictable behavior

So the only solution for you code to start working properly in every browser is to clone fragment without ids and (re-)assign event handlers manually.

Sergey Ilinsky 2010-05-04 18:07:14

Answer 2

+1 A:

I agree with @Sergey Ilinsky. You're running head first into DOM differences between IE and FF.

Try this code, it should help.

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

EDIT: I added some VERY basic browser detection, took out the deep copy with cloneNode, restructured some of the code, and added some browser specific code.

Peter Mourfield 2010-05-06 20:07:07

ansaurus

tags:

views:

answers:

unable to trigger event in IE during cloning

related questions