jQuery slideToggle 问题

Posted 2023-02-25

【中文标题】jQuery slideToggle 问题

【英文标题】：JQuery slideToggle problems

【发布时间】：2011-02-09 13:30:18

【问题描述】：

肯定有一个明显的答案，但我不知道。我正在使用 JQuery .load() 动态加载页面在“已加载”页面上有一个带有表单元素的表单，例如input type="number" (html5)。

如果我slideToggle() 表单元素总是恢复到input type="text" 有什么原因，但是如果我toggle() - （只是toggle()）元素保持“真”同样如果我添加@987654327 @表单元素总是恢复为input type="text"

好的。 “page1”上的 HTML 代码如下所示：

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

它像这样加载到这里 - 是的 doc ready() 等等。

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

【问题讨论】：

您是否在不同的浏览器中检查过这种行为？一样吗？

是的，但现在只是“双重检查”

有兴趣的演示：jsfiddle.net/KmMBd

@Matt 感谢演示 - 在 Chrome 上它仍然是我的“数字”。

@Matt：你的演示不是 ajax 的。不是准确的复制。

【参考方案1】：

就像@jwegner 指出的那样，您的问题不在于 jQuery，而在于浏览器对 HTML5 的支持。

继续，今天只有谷歌浏览器可以理解<input type="number" />。我的意思是“唯一的”，因为它在最终版本中确实如此。 Firefox 4 和 Internet Explorer 9 都承诺会理解此属性，但现在处于 Beta 版或 RC 版，无法考虑。

就像指出的那样，Chrome 也有一个错误：当父级动画时，数字字段上的子级箭头保持隐藏。如果您集中输入并使用键盘箭头，您会看到它仍可用作数字字段。 “只是”外观是错误的。

toggle() 不会发生这种情况，因为父级没有动画，只是再次隐藏并再次可见。但是toggle("slow") 会发生动画，然后也会出现所描述的错误。

我在这里发布了一个解决方法：http://jsfiddle.net/4fBvL/2/，这是基于此：滑出时，您可以使用动画。但要再次出现，必须马上。

另一种解决方法是使用fadeIn() 和fadeOut() 而不是slideUp() 和slideDown()。出于某种原因，fades 不会导致错误。

无论如何，最好的选择是暂时避开type="number"。毕竟，您不希望您的页面仅在 Chrome 中运行，对吧？

【讨论】：

埃里克，非常感谢，很棒的评论/知识/研究。你说得对，我不希望我的页面只在 Chrome 中工作 - 希望看看我是否可以管理它。会检查你的小提琴 - 还没有这样做。谢谢

【参考方案2】：

在 FF (3.6.13) 上它会提醒“文本”，在 Chrome 上“数字”。猜测FF不知道“数字”类型，它恢复为“文本”的默认值。

【参考方案3】：

看起来您的问题是多种因素的组合。

我创建了这个更新的小提琴来帮助显示问题：http://jsfiddle.net/KmMBd/10/

在 Firefox 和 IE 中，Chris 是完全正确的。 Firefox 不支持“数字”类型，因此它始终将其视为“文本”。如果您加载小提琴并点击警报，它将显示“文本”。显然这是不正确的，但是 Firefox 不知道如何处理“数字”类型。如果您检查 firebug 中的输入框，您会看到它实际上说 type="number"，并且只是警告错误。无论您执行何种切换或滑动切换，此行为都将保持不变。

在 chrome 中它看起来像一个错误。鉴于 HTML5 还不是官方标准，这是可以理解的，并且是报告错误的绝佳机会。看起来 Chrome 在重绘数字类型时没有正确呈现数字类型。在小提琴中，如果你先滑动切换 1，然后滑动切换 2，数字微调器会回来。这就是让我认为重绘它是一个问题的原因——我敢打赌，这与孩子/父母的东西有关。此链接包含有关在 Chrome 中报告错误的信息：Report Chrome Bugs

在 Safari 中，问题有点不同。支持数字类型，但未实际处理。简而言之，这意味着 Safari 识别出输入不同于“文本”框，但实际上并没有对这些信息做任何事情。本质上，将 Safari 视为与 Firefox/IE 相同。

简而言之，我想您的问题的真正答案是现在避免输入数字。大多数浏览器（只有一个）不支持它们，而在支持它们的浏览器（实际上，只是 Chrome）中它们是错误的。等一下 - HTML5 很快就会很棒 :)