JQuery slideToggle проблемы

Question

конечно, есть очевидный ответ на этот вопрос, но я его не знаю. Я динамически загружаю страницу, используя JQuery .load(). На «загруженной» странице есть форма с элементами формы, например. input type="number" (HTML5).

Есть ли какая-либо причина, почему, если я слайдог () форму, элементы формы всегда возвращаются к input type="text", но если я toggle() - (просто toggle()), элементы остаются "истинными" Аналогично, если я добавлю toggle('slow') элементы формы всегда возвращаются к input type="text"

Ok. HTML-код на «page1» выглядит следующим образом:

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

он загружается вот так - да, документ готов () и т. Д.

$('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;

});

Это загруженная форма

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>

Это "опции", загруженные с другой страницы:

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

Они загружаются так:

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

Answer 1

Как указал @jwegner, ваша проблема не в jQuery, а в поддержке браузеров HTML5 .

Продолжая, сегодня Google Chrome является единственным, который понимает <input type="number" />.Я имею в виду «единственное», потому что это делает в окончательной версии.И обещания Firefox 4 и Internet Explorer 9, которые будут понимать этот атрибут, но сейчас находятся на бета-версии или RC и не могут рассматриваться.

Как и указано, В Chrome есть ошибка : когдародительский объект анимируется, стрелки детей в числовом поле остаются скрытыми.Если вы сфокусируете свой ввод и используете стрелки на клавиатуре, вы увидите, что он все еще работает как числовое поле.«Просто» внешний вид неправильный.

Это не происходит с toggle(), потому что родитель не анимирован, просто становится скрытым и снова видимым.Но с toggle("slow") происходит анимация, а затем описанная ошибка тоже.

Я разместил здесь обходной путь: http://jsfiddle.net/4fBvL/2/,, основанный на этом: при выдвижении вы можете использовать анимацию,Но чтобы появиться снова, это должно быть немедленно .

Другой обходной путь - использовать fadeIn() и fadeOut() вместо slideUp() и slideDown().По какой-то причине fades не вызывает ошибку.

В любом случае, лучший вариант - пока избегать type="number".В конце концов, вы не хотите, чтобы ваша страница работала только в Chrome, верно?

Answer 2

Похоже, ваша проблема - это сочетание вещей.

Я создал эту обновленную скрипку, чтобы помочь отобразить проблемы: http://jsfiddle.net/KmMBd/10/

В Firefox и IE Крис абсолютно прав. Firefox не поддерживает тип «число», поэтому он всегда обрабатывает его как «текст». Если вы загрузите скрипку и нажмете «предупреждение», на ней появится «текст». Очевидно, что это неправильно, но Firefox не знает, как обрабатывать тип «число». Если вы проверите поле ввода в firebug, вы увидите, что оно на самом деле говорит type = "number" и просто предупреждает неправильно. Это поведение останется верным независимо от того, какие переключатели вы используете.

В хроме это похоже на баг. Учитывая, что HTML5 еще не является официальным стандартом, это понятно, и это прекрасная возможность для сообщения об ошибке. Похоже, что Chrome неправильно отображает тип числа, когда перерисовывает его. В скрипте, если вы сдвинете Toggle 1, а затем slideToggle 2, вернется счетчик чисел. Это то, что заставляет меня думать, что это проблема с перерисовкой - что-то с детскими / родительскими вещами, держу пари. Эта ссылка содержит информацию о том, как сообщать об ошибках в Chrome: Сообщить об ошибках Chrome

В сафари проблема немного другая. Тип номера поддерживается, но фактически не обрабатывается. Короче говоря, это означает, что Safari распознает, что ввод отличается от текстового поля, но на самом деле ничего не делает с этой информацией. По сути, относитесь к Safari так же, как к Firefox / IE.

Короче говоря, я думаю, что истинный ответ на ваш вопрос заключается в том, чтобы прямо сейчас избегать ввода цифр. Они не поддерживаются в большинстве браузеров (только в одном), а в тех, где они поддерживаются (на самом деле, только в Chrome), они содержат ошибки. Подождите немного - HTML5 скоро будет потрясающим :)

Answer 3

На FF (3.6.13) он предупреждает «текст», на Chrome «номер». Полагаю, что FF не знает тип «число», он возвращается к значению по умолчанию «текст».