jQuery 复制表单 Bug 及修复

Bug 的详细描述

当 jQuery 复制表单时,会漏复制 textarea 和 select 的值。更详细的描述见 http://bugs.jquery.com/ticket/3016

解决方案

方案一

重写 jQuery 的复制元素的方法: jQuery.fn.clone

(function(original) {
  jQuery.fn.clone = function() {
    var result = original.apply(this, arguments),
      my_textareas = this.find('textarea').add(this.filter('textarea')),
      result_textareas = result.find('textarea').add(result.filter('textarea')),
      my_selects = this.find('select').add(this.filter('select')),
      result_selects = result.find('select').add(result.filter('select'));
    for (var i = 0, l = my_textareas.length; i < l; ++i) $(result_textareas[i]).val($(my_textareas[i]).val());
    for (var i = 0, l = my_selects.length; i < l; ++i) {
      for (var j = 0, m = my_selects[i].options.length; j < m; ++j) {
        if (my_selects[i].options[j].selected === true) {
          result_selects[i].options[j].selected = true;
        }
      }
    }
    return result;
  };
})(jQuery.fn.clone);

带注释版见这里

方案二

新建一个 API,只在复制表单元素时用。代码如下

$.fn.cloneForm = function() {
  var $form = $(this);
  var $clonedForm = $form.clone();
  var $missingClonedInput = $clonedForm.find('textarea,select');
  $form.find('textarea,select').each(function(index) {
    $missingClonedInput.eq(index).val($(this).val());
  });
  return $clonedForm;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python爬虫与算法进阶

为什么Selenium点不到元素

最近做了许多登陆项目,我会优先选择使用requests来模拟请求,但是有些参数实在是很难获取,这个时候我会使用Selenium,也还是遇到了各种坑,也算是见识到...

1380
来自专栏数据小魔方

单元格格式/条件格式的妙用

今天跟大家分享一种常用的技巧——利用单元格格式/条件格式按颜色划分不同数据等级。 ▽▼▽ 这个技巧在绩效管理、成绩考评以及其他设计考核的工作中都会经常用到。首...

4817
来自专栏前端小叙

react给一个div行内加背景图片并实现cover覆盖模式居中显示

这里注意,如果简写里要写background-size,则这里必须写 /  ,否则整个背景图片样式没有解析出来。

5512
来自专栏IT开发技术与工作效率

IntelliJ IDEA 教程 技巧篇本篇概要

1172
来自专栏练小习的专栏

几种SVG图像的fallbacks

在网页前景图像的使用上,针对不同像素比的屏幕,常规的做法是使用2X 3X的图像。 一些特定场景可以使用SVG来完成,因为他的矢量特性,不需要再针对更高的像素比...

1895
来自专栏cnblogs

关于HTML面试题汇总之H5

一、H5有哪些新特性,移除了哪些元素?如何处理h5新标签的浏览器兼容性问题,如何区分html和html5 1. html5不在是SGL(通用标记语言)的一个子集...

2825
来自专栏Samego开发资源

QT Creator Usage

2004
来自专栏Golang语言社区

golang进度条

进度条元素 ▪ 总量 ▪ 当前进度 ▪ 耗时 通过以上元素可以延伸出:完成百分比、速度、预计剩余时间、根据设置速度快慢阈值用不同的颜色来显示进度条。 实现 进度...

40010
来自专栏听雨堂

CSS实现按钮的两张图片的同步出现

      通过图片交换实现了按钮图片,但是存在一个问题,老是先加载一个图片,另外一个却加载得慢,效果反而不好。这是网上的解决方法,实现css图片的预加载: <...

2009
来自专栏码农阿宇

Visio如何调整锁定图像大小

在Visio中,比如模板中的UML类图,是不可调整大小的,这可能给我们设计图片带来了一些不便之处,如下图: ? 可以看到其边框是显示锁定状态无法修改的,当我们在...

3956

扫码关注云+社区

领取腾讯云代金券