JQuery slideToggle problems

Question

sure there is a obvious answer to this one but I don't know it. I am dynamically loading a page using JQuery .load() On the "loaded" page there is a form with form elements e.g. input type="number" (HTML5).

Is there any reason why if I slideToggle() the form the form elements always revert back to input type="text" yet if I toggle() - (just toggle()) the elements remain "true" Likewise if I add toggle('slow') the form elements always revert back to input type="text"

Ok. The HTML code on "page1" looks like this:

<form method="post" id="frmcreate">
<ol></ol>
<input type="submit" id="testit" />
</form>

it is loaded into this like this - yes doc ready() etc.

$('ul#fieldtypes li a').click(function(){
var id_timestamp = new Date().getTime();
var id = $('.inputlength').length;
$( "#frmcreate ol" ).append('<li id='+id_timestamp+' class="inputlength"></li>');
$('#'+id_timestamp).load('test1.php?y='+id);
return false;

});

This is the form that is loaded

Type <input type="text" name="fieldmeta<?php echo $y; ?>[type]" /> <?php echo $error; ?> 
<br/>
Name <input type="text" name="fieldmeta<?php echo $y; ?>[name]" value="<?php echo $y; ?>" /> <?php echo $error; ?> 
<br/>
<div class="optoggle">OPTIONS</div>

These are the "options" loaded from another page:

<li>Cols<input type="number" name="fieldmeta<?php echo $y; ?>[cols]" /> <?php echo $error; ?></li>
<li>Rows<input type="number" name="fieldmeta<?php echo $y; ?>[rows]" /> <?php echo $error; ?></li>
<li>Size<input type="number" name="fieldmeta<?php echo $y; ?>[size]" /> <?php echo $error; ?></li>

They are loaded like this:

$('.optoggle').live('click',function(){
    $(this).next('div').toggle();
});

Answer 1

Like @jwegner pointed, your problem isn't with jQuery but is with browsers support to HTML5.

Resuming, today Google Chrome is the only that understands <input type="number" />. I mean "the only" because it does on a final version. Both Firefox 4 and Internet Explorer 9 promisses that will understand this attribute, but are on Beta or RC now and can't be considered.

Like pointed too, Chrome have a bug: when a parent is being animated, the children arrows on the number field stays hidden. If you focus your input and you use keyboard arrows, you'll see that it yet works as an number field. "Just" the appearance is wrong.

It does not happens with toggle() because the parent isn't animated, just turns hidden and visible again. But with toggle("slow") an animation happens, then the described bug too.

I posted a workaround here: http://jsfiddle.net/4fBvL/2/, wich is based on this: when sliding out, you can use animations. But to show up again, it must be imediatelly.

Another workaround is to use fadeIn() and fadeOut() instead of slideUp() and slideDown(). By some reason, fades doesn't causes the bug.

Anyway, the best option is to avoid type="number" for now. After all, you do not want your page to work only in Chrome, right?