SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question unable to trigger event in IE during clonning

    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;cursorointer;");}
    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>

    can anybody tell me whats the problem in above code please correct me..

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dynamically created events are lost in the cloning process, also the id must be changed to be unique.
    Event delegation is a better way to approach the problem.

  3. #3
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A few more problems:
    Code:
    for(var j=0;j<4;j++) {
    var summaryDiv = document.createElement("div");
    summaryDiv.id = "sDiv"+j;
    summaryDiv.className ='summaryDiv';
    restoreEvents(summaryDiv, j)
    // IE can't do setAttribute("style","
    // swapping className could be used
    summaryDiv.onmouseover = function() {this.style.cssText = "text-decoration:underline;cursor:pointer;";};
    summaryDiv.onmouseout = function() {this.style.cssText = "text-decoration:none;";};
    // create property, passing a loop variable doesn't work
    summaryDiv.count = j;
    summaryDiv.onclick = show_tooltip;
    summaryDiv.innerHTML = 'Div'+j;
    firstDiv.appendChild(summaryDiv);
    }
    and
    Code:
    function show_tooltip(e) {
    var e = e || window.event;
    var target = e.srcElement || e.target;
    alert(target.count +"=="+e.type);
    }


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •