当前位置：文江博客话题详情

jQuery clone internet-explorer

jQuery 克隆问题

发布于 2024-08-31 01:57:07 字数 914 浏览 3 评论 0 原文

我正在尝试克隆一个 div 并更改该 div 中输入字段的名称。它适用于大多数浏览器，但 IE 7 不会更改输入字段的名称属性。

HTML

<body>
  <pre></pre>
  <div><input value="Hello World" name="test"></div>
</body>

var lastRow = $("body div:last"),
    newRow  = lastRow.clone(true)
              .show()
              .insertAfter(lastRow);

newRow.find('input').attr("name","test2");

$("pre").text( newRow[0].innerHTML );

结果：

Firefox：（有效）

IE8（有效）

IE7（错误）：

如您所见，IE7 的名称没有更改为 test2。

有什么明显的原因或解决方法吗？

原文

I am trying to clone a div and change the names of the input fields in this div.
It works great for most of the browsers but IE 7 does not change the name attribute of the input fields.

Demo: http://jsbin.com/iduro/7

HTML

<body>
  <pre></pre>
  <div><input value="Hello World" name="test"></div>
</body>

var lastRow = $("body div:last"),
    newRow  = lastRow.clone(true)
              .show()
              .insertAfter(lastRow);

newRow.find('input').attr("name","test2");

$("pre").text( newRow[0].innerHTML );

Results:

Firefox: (works)
<input value="Hello World" name="test2">

IE8 (works)
<INPUT value="Hello World" name=test2 jQuery1273063250500="4">

IE7 (bug):
<INPUT value="Hello World" name=test jQuery1273063303968="4">

As you see the name of IE7 does not change to test2.

Is there any obvious reason or work around?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心安伴我暖 2024-09-07 01:57:07

我现在可以修复它。
只要输入字段未附加到 dom，您就可以更改名称并且单选按钮再次正常工作。

// Old Code
 $("div:last").clone(true).children("input").attr("name","newName");

// New Code
 $("div:last").clone(true).children("input").fixCloneBug ("newName");

为了降低执行时间，仅复制 jQuery 事件、className 和 type 属性。

fixCloneBug 方法：

(function( $ )
{


    if ( ! $.browser.msie || parseInt( $.browser.version ) > 7 )
        // NO FIX FOR IE 7+ FF WEBKIT
        $.fn.fixCloneBug = function( newName ){ return this.attr( "name", newName ) };
    else
        // FIX IE 5-7
        $.fn.fixCloneBug = function( newName )
        {
            var $cloned = $();

            this.each(function( )
            {
                    /* -._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._

                       Create a new element with className and jQuery events of the buggy element

                    */          

                    var     $elem    = $(this),

                            $newElem = $(document.createElement( $elem.attr('tagName') ));

                            // USE SAME TYPE

                    $newElem.attr('type', $elem.attr('type') );


                            // SET NAME
                    $newElem.attr('name', this.name );
                    $newElem.attr('name', newName );

                            // ADD TO DOM

                    $newElem.insertBefore( $elem );

                            // CLONE EVENTS
                    $newElem.data( "events", $elem.data("events") );

                            // CLASS NAME
                    $newElem.attr('className', this.className );

                    /* -._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._

                       Delete buggy element 

                    */

                    $elem.remove();


                    // Add to result
                    $cloned.push($newElem);
            })

            return $cloned;

        }

}(jQuery));

也许您认为 $newElem.attr('name', this.name ); 无用，但它允许我使用 jQuery 1.4 功能：

.fixCloneBug (function(i,旧名称）{ 返回旧名称+“_new” }）

I could fix it for now.
As long as an input field is not attached to the dom you can change the name and the radio buttons work properly again.

// Old Code
 $("div:last").clone(true).children("input").attr("name","newName");

// New Code
 $("div:last").clone(true).children("input").fixCloneBug ("newName");

To lower the execution time only the jQuery Events, the className and the type attribute are copied.

fixCloneBug Method:

(function( $ )
{


    if ( ! $.browser.msie || parseInt( $.browser.version ) > 7 )
        // NO FIX FOR IE 7+ FF WEBKIT
        $.fn.fixCloneBug = function( newName ){ return this.attr( "name", newName ) };
    else
        // FIX IE 5-7
        $.fn.fixCloneBug = function( newName )
        {
            var $cloned = $();

            this.each(function( )
            {
                    /* -._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._

                       Create a new element with className and jQuery events of the buggy element

                    */          

                    var     $elem    = $(this),

                            $newElem = $(document.createElement( $elem.attr('tagName') ));

                            // USE SAME TYPE

                    $newElem.attr('type', $elem.attr('type') );


                            // SET NAME
                    $newElem.attr('name', this.name );
                    $newElem.attr('name', newName );

                            // ADD TO DOM

                    $newElem.insertBefore( $elem );

                            // CLONE EVENTS
                    $newElem.data( "events", $elem.data("events") );

                            // CLASS NAME
                    $newElem.attr('className', this.className );

                    /* -._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._.-._

                       Delete buggy element 

                    */

                    $elem.remove();


                    // Add to result
                    $cloned.push($newElem);
            })

            return $cloned;

        }

}(jQuery));

Maybe you think $newElem.attr('name', this.name ); is useless however it allows me to use a jQuery 1.4 feature:

.fixCloneBug (function(i,oldname){ return oldname+"_new" })

回复收藏 0 原文

ゝ偶尔ゞ 2024-09-07 01:57:07

尝试这个（原始代码）

$(some_cloned_element).each(function(i, elem){
    var newName = "yay_i_love_my_new_name";
    if ($.browser.msie === true){ // evil browser sniffing *cries*
        $(elem).replaceWith(document.createElement(
            this.outerHTML.replace(/name=\w+/ig, 'name='+newName+'_'+i)
        ));
    } else {
        $(elem).attr('name',newName+'_'+i);
    }
    $("body").append(some_cloned_element);
});

检查i=50然后中断/退出

更好的方法：使用名称作为数组，如name=图片[]

参考< /a>

try this ( raw code)

$(some_cloned_element).each(function(i, elem){
    var newName = "yay_i_love_my_new_name";
    if ($.browser.msie === true){ // evil browser sniffing *cries*
        $(elem).replaceWith(document.createElement(
            this.outerHTML.replace(/name=\w+/ig, 'name='+newName+'_'+i)
        ));
    } else {
        $(elem).attr('name',newName+'_'+i);
    }
    $("body").append(some_cloned_element);
});

check when i=50 and then break/exit

better way : use name as array like name=picture[]

Refernece

回复收藏 0 原文

羞稚 2024-09-07 01:57:07

如果您在发布表单时将它们作为一组进行访问，则无需更改名称 - 只需不要在括号内放置值，当您在服务器端获取数组时，它会为您递增：

< code>

如果您需要能够通过 js 中的索引访问每一个，您可以在返回的相应集合上使用 get通过选择器。或者您可以分配 ID 属性，例如 test_1。

回复收藏 0 原文

蓝颜夕 2024-09-07 01:57:07

单选按钮的简单解决方案是：

$("div:last").find("radio").each(function(){
     var name="someNewName";
     var id="someNewId";
    if (!$.browser.msie || parseInt($.browser.version) > 7) {
      this.name = name;
      this.id=id;
    }
    else {
      (this).attr("outerHTML", "<input type=radio id=" + id + " name=" + name + " />");  
    }
});

这将更改元素的 outerHTML，以便覆盖元素（单选按钮）的 HTML。同样的解决方案也适用于其他控件：find("input") / find("checkbox")。

The simple solution for Radio button is :

$("div:last").find("radio").each(function(){
     var name="someNewName";
     var id="someNewId";
    if (!$.browser.msie || parseInt($.browser.version) > 7) {
      this.name = name;
      this.id=id;
    }
    else {
      (this).attr("outerHTML", "<input type=radio id=" + id + " name=" + name + " />");  
    }
});

This will alter the outerHTML of the element so that the HTML for the element(radio button) is overwritten. The same solution can be applied for : find("input") / find("checkbox") for the other controls too.

回复收藏 0 原文

~没有更多了~