[JS] IE7/8 Clone/Append probleem

[xxscxx]

Laatste weken ben ik bezig geweest een groot probleem op IE7/8 op te lossen. Ik werk momenteel met jQuery 1.2.6 (Drupal) en ik gebruik de .clone() functie gevolgd door meerdere .append() functies.

Ik ben bezig met een carrousel met plaatjes, waarin de verscheidene plaatjes vijf keer gekopieerd worden. Aan deze plaatjes zitten twee events gekoppeld namelijk, mouseover en click Deze plaatjes hebben een '.mouseover()' en een '.click()' event. Wanneer ik .clone() gebruik en alles met .append() aan elkaar plak, ziet het er goed uit in FF, Chrome en Safari. Maar in IE7/8 werkt het duidelijk niet.

Concluderend zijn er 2 problemen na die acties:

1.De imageslider wordt vijf keer gekopieerd en IE laat alleen de eerste zien die gekopieerd is.De andere drie zijn wel zichtbaar aangemaakt in de source code maar niet op het scherm. In de functie zit een onderdeel dat de correcte width waarde berekend en toepast op de div. Jammer genoeg, gebeurd dat wel in andere browsers maar niet in IE.

2.
Een nog belangrijker probleem is eigenlijk: dat bij de carrousel die al een keer gekopieerd is, ook de events niet gekopieerd worden. In IE ontwikkel tools zie ik dat het jQuery1232434 (elk nummer mogelijk) attribuut als waarde op 'null' staat in de diepte naar alle children elementen. En ja ik heb .clone(true) gebruikt.

Ik zou niet weten waar het probleem uberhaupt zit, en dus weet ik ook niet hoe het op te lossen is. Hieronder de source code voor het kopieren en aankoppelen:

[JS] if (width > 1280)

{

var newWidth;

//Copy content of scrolling div

var thumbImages = $("div").clone();



for (var i = 0; i < 4; i++)

{

var lefArrCount = 1;

thumbImages.children().each(function()

{

//Change left values from images

newWidth = width * (i + 1);

var cssLeft = leftArray[lefArrCount] + newWidth;

$(this).css("left", cssLeft+'px');

lefArrCount++;

});

lefArrCount = 1;



//Append code, IE fails on taken over handlers (also with .clone(true))

$("div").append(thumbImages[0].innerHTML);

}



//Edit total width (IE fails and sets the width to width * 2)

$('div').css("width", (newWidth + width));

}



//Add the srcolling functionality on the DIV.

$(function() {

$("div").smoothDivScroll({

scrollingSpeed: 12,

mouseDownSpeedBooster: 3

});

});

}[/JS]