JQuery клон проблема - PullRequest
Новая
       7

JQuery клон проблема

6 голосов
/ 05 мая 2010

Я пытаюсь клонировать div и изменить имена полей ввода в этом div. Он отлично работает для большинства браузеров, но IE 7 не меняет атрибут name полей ввода.

Демо: http://jsbin.com/iduro/7

HTML 

<code><body>
  <pre>

JS 

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

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

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

Результаты:

Firefox: (работает) <input value="Hello World" name="test2">

IE8 (работает) <INPUT value="Hello World" name=test2 jQuery1273063250500="4">

IE7 (ошибка): <INPUT value="Hello World" name=test jQuery1273063303968="4">

Как видите, имя IE7 не меняется на test2.

Есть ли очевидная причина или обходной путь?

Ответы [ 4 ]

2 голосов
/ 05 мая 2010

Я мог бы исправить это сейчас. Пока поле ввода не привязано к домену, вы можете изменить имя и переключатели снова будут работать правильно. 

// 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,oldname){ return oldname+"_new" })

1 голос
/ 05 мая 2011

попробуйте это (необработанный код) 

$(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=picture[]

Эталонный

0 голосов
/ 05 сентября 2010

Простое решение для радиокнопки: 

$("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") и для других элементов управления.

0 голосов
/ 05 мая 2010

Если вы открываете доступ к ним как к набору при публикации формы, вам не нужно менять имя - просто не ставьте значение в скобках, и оно будет увеличено для вас, когда вы получите массив на сервереside:

<input name="test[]" />

Если вам нужен доступ к каждому по индексу из js, вы можете просто использовать get в соответствующей коллекции, возвращаемой селектором.Или вы можете назначить атрибуты идентификатора, такие как test_1.

...