解决IE7中使用jQuery动态操作name问题


Posted in jQuery onAugust 28, 2017

问题:IE7中无法使用Jquery动态操作页面元素的name属性。

在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值。

然开发和测试环境总是不能重现问题。坑爹之处就在于此,不能重现就不能调试,就不能知道改了后还会不会有这样的问题。

想想可能与客户环境唯一不同就只有可能是js缓存问题了,然后把所有的js文件引用的地方都加上一个当前时间参数,然问题依然存在。

本来规定的版本就是IE8,所以也没有想过会有版本兼容问题,在说了咱用的是jquery,jqeruy的出现不就是号称为了解决浏览器的兼容问题么。

该死了问题,还真实版本问题。因为某些页面需要用到IE8的兼容模式,然兼容模式其实就是像下兼容,那不就是兼容IE7 了么?

于是本地用demo测试了下。

<form id="form1" runat="server">
  <div id="div">
   <input id="input" name="1" value="123" />
  </div>
 </form>
 <script src="jquery-1.6.4.min.js"></script>
 <script>
  $("#input").attr("name", "myname");
  alert("name:" + $("#input").attr("name") + "***html:" + $("#div").html());
 </script>

IE8:

解决IE7中使用jQuery动态操作name问题

ok!

IE8兼容模式:

解决IE7中使用jQuery动态操作name问题

??为什么 $("#input").attr("name")取到的是修改后的值,而$("#div").html() 取到的name还是原先的值??

F12查看生成的html

解决IE7中使用jQuery动态操作name问题

擦 submitName 是什么东东?明显name没有改变。submitName 应该是jquery生成的 然后读取name的时候 也是直接读取的submitName 的值。

那 为什么$("#div").html() 取的值中没有submitName 呢 ??  我也不知道jquery中的html方法是怎么实现的~~

项目中的实现方式类似于:

<form id="form1" runat="server">
  <div id="div">
   <input id="input" name="1" value="123" type="text" />
  </div>
  <div id="div2">
  </div>
 </form>
 <script src="jquery-1.6.4.min.js"></script>
 <script>
  //alert("name:" + $("#input").attr("name") + "***html:" + $("#div").html());
  $("#input").attr("name", "myname");
  $("#div2").html($("#div").html());
  var nameVal = $("#div2").find("input[name='myname']").val();
  alert(nameVal);
 </script>

这样  在IE8和谷歌浏览器 取值正常,在IE8兼容模式却取不到值。【不要问为什么非要这么赋值取值,这是demo'类似于'的实现,且是一个框架】

解决方案:

1.直接用jquery修改name 然后访问name是ok的,虽然 中间是生成了submitName 。

2.可以先$("#div2").html($("#div").html()); 然后在修改.attr("name", "myname");

3.可以直接拼接html。    $("#div").html("<input id="input" name="myname" value="123" type="text" />")

最后百度了下,原来是 IE7不能用document.getElementsByName()访问js动态创建和修改后的name值。

总结

以上所述是小编给大家介绍的解决IE7中使用jQuery动态操作name问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery树插件zTree使用方法详解
May 02 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
使用jQuery实现购物车
Oct 29 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 #jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 #jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 #jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 #jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 #jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 #jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 #jQuery
You might like
如何离线执行php任务
2017/02/21 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
DWZ table的原生分页浅谈
2013/03/01 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
Three.js快速入门教程
2016/09/09 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
python任务调度实例分析
2015/05/19 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
财务管理职业生涯规划范文
2013/12/27 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
物理教育专业求职信
2014/06/25 职场文书
敬老月活动总结
2014/08/28 职场文书
数学教师个人总结
2015/02/06 职场文书
团委副书记工作总结
2015/08/14 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫