Apr 29

[原]jQuery中html()方法在IE 和 FireFox 的差别 雨

linuxing , 13:36 , 编程 » JavaScript , 评论(2) , 引用(0) , 阅读(17419) , Via 本站原创 | |
    本来想着用jQuery等框架去避免浏览器之间对JavaScript处理的差异,但最终还是不能完全回避问题。刚好今天在Linux下修改代码,就发现了一个IE 和 FireFox 处理起来的不同之处。该方法是html() 。

一、版本
因时间问题,我没有深究不同情况下的区别,仅列举一下现在的版本:
引用
jQuery:1.3.2
InternetExplorer:7.0
FireFox:3.6.3

二、描述
问题很简单,就是在类似下面的html代码中:

<div><input id="test" name="test" type="text" /><div>

使用jQuery的val()方法给该输入框赋值,然后用html()读取其HTML代码,会存在区别。
例如:

$('input[name=test]').val('ok');
alert($('div').html());

你会发现,IE 下是这样的:
<input id="test" name="test" type="text" value="ok"/>

而FF下是会是:
<input id="test" name="test" type="text"/>

也就是说,FF下获得的HTML只有最原始的代码,不包括动态插入的内容。
◎ 测试页面:
知道区别就好,原因我暂时没空去看jQuery的源码,暂时的解决办法是,先获得html(),然后再对目标来修改了。如:

$('#dialog').html($('div').html());
$('#dialog input[name=test]').val('ok');

该问题估计与FF下appendTo()方法的不同有关,下面的输入框都受影响:

<input type="radio" />
<input type="checkbox" />
<textarea ></textarea>

※ 下面的地址,提供了一个jQuery plugin的.formhtml()方法来处理该问题。(同样是html()后,再修改目标)
http://www.cnblogs.com/michael110/archive/2010/03/05/1679289.html

三、类似的问题
从上面可见,使用jQuery也不是可以完全避免IE和FF对JavaScript处理的不同的,类似的还有。例如下面的选择符:

$('#dialog #editTable')

在FF下可以获得id="dialog"下的id="editTable"的DOM,但IE下,则为null 。所以,在使用jQuery时,还是需要谨慎啊!

四、参考
jQuery:append 和 appendTo 在firefox和ie中的区别
jquery html() 在IE 和Firefox下区别
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Tags: ,
Wai
2010/05/01 13:18
input 最得value的值方法好像是

$('input[name=test]')[0].value = "ok";

alert($('input[name=test]')[0].value);

這樣應該沒有ie 和ff 的問題
linuxing 回复于 2010/05/06 01:17
您没有明白这篇日志的意思。我不是说jQuery的val()方法有问题,实际上您提供的$('input')[0].value='ok'与$('input').val('ok')作用是相同的。只是value是DOM的方法,val是jQuery对象的方法而已。
但我想说明的是,jQuery的html()方法在FF和IE下的不同。我新添加了一个测试的页面,您在两个浏览器上测试一下就明白了。这还涉及到FF下多个jQuery方法的差异,如append、appendTo等。
博爱老头 Homepage
2010/04/29 16:52
很久么有弄过技术问题了。
linuxing 回复于 2010/04/30 10:41
那说明你已经比我高一个层次咯。^_^
分页: 1/1 第一页 1 最后页
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]