`

jquery的clone方法bug的修复

阅读更多
       本人原创,发现一些网站无道德的抓取,请自觉删去内容,转载请注明出处: http://asialee.iteye.com/blog/1753447

      项目中多次使用了iframe,但是操作起来是比较麻烦,项目中的现实情况是最外面是一个form,里面嵌套一个iframe,下面是一个其他的数据,在form提交的时候将iframe的数据和其他的数据一块提交。
     现在采用的是最原始的办法就是在form提交之前,将iframe里面的input,select,textarea都clone到外面的form里面,然后进行表单提交,随便说明一下,ifram表单里面可能有文件上传的input. 虽然感觉这个方法不好,但是比较简单,如果各位博友有好的办法欢迎一块讨论。直接上项目中的的代码吧:

$("iframe").find("input").each(function(){
	$("#formHidden").append($(this).clone());
});
$("iframe").find("select").each(function(){
	$("#formHidden").append($(this).clone());
});
$("iframe").find("textarea").each(function(){
	$("#formHidden").append($(this).clone());
});

      另外,测试发现,textarea和select的jquery的clone方法有问题,textarea和select的值clone的时候会丢掉,发现这个是jquery的一个bug,在网上发现一个插件,下载地址如下:https://github.com/spencertipping/jquery.fix.clone/blob/master/jquery.fix.clone.js,上不了的可以看下代码,比较简单。就是在clone的时候将val再重新赋值一下,如果知道这个了,也可以不用这个插件,自己写。
    

// Textarea and select clone() bug workaround | Spencer Tipping
// Licensed under the terms of the MIT source code license

// Motivation.
// jQuery's clone() method works in most cases, but it fails to copy the value of textareas and select elements. This patch replaces jQuery's clone() method with a wrapper that fills in the
// values after the fact.

// An interesting error case submitted by Piotr Przybył: If two <select> options had the same value, the clone() method would select the wrong one in the cloned box. The fix, suggested by Piotr
// and implemented here, is to use the selectedIndex property on the <select> box itself rather than relying on jQuery's value-based val().

(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) result_selects[i].selectedIndex = my_selects[i].selectedIndex;

    return result;
  };
}) (jQuery.fn.clone);

分享到:
评论

相关推荐

    jquery的clone方法应用于textarea和select的bug修复

    测试发现,textarea和select的jquery的clone方法有问题,textarea和select的值clone的时候会丢掉,发现这个是jquery的一个bug,上不了的可以看下代码,比较简单。就是在clone的时候将val再重新赋值一下,如果知道这个...

    jquery中文版离线手册

    2. **DOM操作**:jQuery提供了便捷的方法来创建、插入、删除DOM元素,如`append()`在元素内部追加内容,`remove()`移除元素,`clone()`克隆元素。 3. **事件处理**:jQuery统一了跨浏览器的事件处理,`click...

    jQuery1.41中文API文档

    - jQuery 1.4.1 相比于之前的版本,可能会有性能提升、bug 修复和新的 API 添加。例如,1.4.1 版本可能对某些动画进行了优化,增加了新的选择器等。 在压缩包中,`JQuery_1.4_API.CHM`、`jQueryAPI-1.41.chm` 都是...

    jQuery 3.3.1 api docs 中文手册 [chm]

    jQuery 3.3.1 是一个稳定版本,修复了之前版本的一些bug,并优化了性能。开发者应定期检查更新,以利用最新特性并解决潜在问题。 ### 学习资源 - 官方网站(英文):https://api.jquery.com/ - 中文文档:...

    jquery-3.31版本

    例如,`append()`、`remove()`和`clone()`等方法的性能都有所提升,使得开发者在构建动态网页时能更加得心应手。 再者,jQuery 3.31对事件处理进行了改进,确保了事件绑定和解绑的精确性。`on()`和`off()`方法现在...

    jQuery1.11.3 中文手册.7z

    jQuery 1.11.3作为长期支持(LTS)版本,主要修复了已知的bug和安全问题,确保了代码的稳定性和安全性。虽然jQuery已经更新到了3.x版本,但1.11.3仍被许多项目广泛使用。 综上所述,《jQuery1.11.3中文手册》是前端...

    jquery1.7参考手册(chm版)

    8. **版本更新**:jQuery 1.7 版本相比之前的版本可能有性能优化、API调整或bug修复,手册会详细列出这些变更。 9. **兼容性**:jQuery 通常会尽可能地支持各种浏览器,包括IE6+,手册中会介绍不同浏览器下的兼容性...

    jquery-3.1.1.zip

    2. **DOM操作**:jQuery提供了一系列方法来操作DOM(Document Object Model),如`.append()`用于在元素内部添加内容,`.remove()`用于删除元素,`.clone()`用于复制元素等,这些都比原生JavaScript更简便。...

    jQuery1.4.1中文参考(chm)

    2. **DOM操作**:jQuery提供了一系列方法来操作DOM,如`append()`在元素内部添加内容,`remove()`删除元素,`clone()`克隆元素,以及`attr()`和`removeAttr()`用于修改或移除属性。 3. **事件处理**:通过`.on()`...

    jquery-easyui-EDT-1.5.5.7z

    numberbox:'cloneFrom'方法可用; slider:'step'属性可以设置为浮点数; menu:'findItem'方法允许用户通过任意参数查找菜单项; menubutton:添加'showEvent'和'hideEvent'属性。 New Plugin(新组件) ...

    jquery-1.8.3.js和jquery-1.8.3.min.js和插件库

    相对于1.8.2版本,jQuery 1.8.3主要修复了一些已知的bug,提高了性能,并增强了对新特性的支持。例如: 1. 对于事件处理,1.8.3版本优化了事件委托,提高了事件处理的效率。 2. 在AJAX方面,提升了跨域请求的支持,...

    Jquery api

    这两个版本之间的主要区别在于修复了一些bug,增加了对新浏览器特性的支持,并优化了性能。例如,1.8版本引入了新的`.on()`方法,替代了`.bind()`, `.live()`, 和`.delegate()`,以提供更好的事件处理性能和更灵活的...

    jquery-1.12.4.zip

    同时,它修复了一些已知的bug,提高了性能,并保持了与1.12.x系列的向后兼容性。 四、使用jQuery 1.12.4的实际案例 在实际开发中,jQuery 1.12.4常用于构建交互式网页。例如,一个简单的表单验证场景: ```...

    jquery1.6 API

    jQuery 1.6版本是这个强大的JavaScript库的一个重要里程碑,它在前一版本的基础上引入了许多新特性,优化了性能,并修复了大量的bug,为开发者提供了更强大、更灵活的工具。这个版本的API文档(JQuery1.6.chm)是...

    jquery中文API1.7-1.8集合

    10. **版本差异**:jQuery 1.7到1.8主要改进了性能,修复了bug,并引入了一些新的API。例如,`.on()`和`.off()`的引入提升了事件处理的灵活性。 以上只是jQuery API1.7-1.8集合的部分核心内容,实际使用中还有更多...

    jQuery1.8.3_中文使用手册

    9. **版本更新(Version Updates)**:jQuery1.8.3是一个重要的更新,它修复了前一版本中的若干bug,增强了稳定性,并引入了一些新特性,比如更灵活的事件处理机制和更好的动画控制。 通过《jQuery1.8.3中文使用...

    jquery1.8.3

    此外,还修复了一些已知的bug,增强了对不同浏览器的兼容性。 总结起来,jQuery 1.8.3作为一个重要的版本,它集成了丰富的选择器、简便的DOM操作、灵活的事件处理、丰富的动画效果和强大的Ajax交互功能。无论是初学...

    jQuery API 1.2 中文文档

    8. **版本变更(Changelog)**:`changelog.txt`文件记录了jQuery 1.2相对于先前版本的改动和改进,这对于了解新特性、修复的bug以及可能的兼容性问题至关重要。 在阅读`index.html`文档时,你会找到关于这些知识点...

    jQuery1.8~1.11全套加帮助文档

    8. **版本更新**:从1.8到1.11,jQuery主要进行了性能优化、API改进和bug修复。例如,1.9移除了部分过时的API,鼓励开发者采用新的最佳实践;1.10增加了对jQuery Migrate的支持,帮助用户平滑过渡到新版本。 帮助...

Global site tag (gtag.js) - Google Analytics