前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery 复制表单 Bug 及修复

jQuery 复制表单 Bug 及修复

作者头像
前端GoGoGo
发布2018-08-27 10:38:42
3840
发布2018-08-27 10:38:42
举报

Bug 的详细描述

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

解决方案

方案一

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

代码语言:javascript
复制
(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,只在复制表单元素时用。代码如下

代码语言:javascript
复制
$.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;
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2014.12.19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Bug 的详细描述
  • 解决方案
    • 方案一
      • 方案二
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档