jquery, fadeIn, IE problem

Har ett ganska enkelt jQuery script där man kan addera fler fält i ett formulär, så här:

$(document).ready(function(){
	$('#addFields').click(addFields)
});

function addFields() {	
	var strToAdd = $('<div class="fl_form_row"><input class="fl_input fl_input_margin" type="text" name="asd1[]" value="Asd1" onfocus="clearMe(this)" /><input class="fl_input" type="text" name="Asd2[]" value="Asd2" onfocus="clearMe(this)" /></div>').hide().fadeIn(1000);
	$('#mainField').append(strToAdd);
}

function clearMe(formfield){
	if (formfield.defaultValue==formfield.value)
		formfield.value = "";
}

Detta fungerar bra i FireFox, de två input-boxarna fadear in som de ska. I internet explorer så "flashar" de till först och sedan fadeas de in. Så man hinner se dem 0.1-0.2sek när man klickar på "addera fler fält"-knappen.

Har sökt som en tok på google för en lösning men har ej hittat någon.

Har bara testat detta i IE8/FF, inte i IE7/IE6.

onfocus="clearMe(this)" fungerar inte heller i IE8 på den dynamiskt tillagda boxarna, jag har två sådana här exakt likadana boxar synliga från början. Och där fungerar onfocus-scriptet utan problem.

Någon som har några tips?

Animera den först att den finns i DOM:en:

function addFields() {     
	var strToAdd = $('<div class="fl_form_row"><input class="fl_input fl_input_margin" type="text" name="asd1[]" value="Asd1" onfocus="clearMe(this)" /><input class="fl_input" type="text" name="Asd2[]" value="Asd2" onfocus="clearMe(this)" /></div>').hide();
	$('#mainField').append(strToAdd); 
	strToAdd.fadeIn(1000);
}

red.

function addFields() {     
	var strToAdd = $('<div class="fl_form_row"><input class="fl_input fl_input_margin" type="text" name="asd1[]" value="Asd1"/><input class="fl_input" type="text" name="Asd2[]" value="Asd2" /></div>').hide();
	$("input", strToAdd).focus(clearMe);
	$('#mainField').append(strToAdd); 
	strToAdd.fadeIn(1000);
}

function clearMe(){
	if (this.defaultValue==this.value)
		this.value = "";
}

$(document).ready(function(){
	$('#addFields').click(addFields)
});

Jag hatar on<> attribut i HTML koder, bind de input fält du har i din HTML (strToAdd).

defaultValue finns inte i IE (8) när jag testar, så den kommer inte fungera riktigt heller för dig.

Fungerar bra med animationen! Tackar!

Det märkliga är att clearMe() funktionen fungerar om jag "hårdkodar" input fälten i html-koden med onclick i IE8. Och det är ju samma funktion som läggs till i javascriptet också.

dock så finns inte elementen, så jag vet inte riktigt vad IE gör men den verkar inte spara undan defaultValue på element som skapas efter att sidan har laddats in.

Quick fix för dig, du kan använda dig av data objektet i jquery:

function addFields() {     
	var strToAdd = $('<div class="fl_form_row"><input class="fl_input fl_input_margin" type="text" name="asd1[]" value="Asd1"/><input class="fl_input" type="text" name="Asd2[]" value="Asd2" /></div>').hide();
	$("input", strToAdd).focus(clearMe).each(function() { $(this).data("defaultValue",this.value)});
	$('#mainField').append(strToAdd); 
	strToAdd.fadeIn(1000);
}

function clearMe(){
	if ($(this).data("defaultValue")==this.value)
		this.value = "";
}

$(document).ready(function(){
	$('#addFields').click(addFields)
});