Проблема с использованием функции клона jQuery в форме

Question

Те фрагменты кода, которые вы будете проверять, прекрасно работают для FF, Chrome, Safari, но, похоже, проблема с IE при запуске функции клона jQuery:

Мой шаблон:

<form method="post" action="/post/add/">
{{ form.management_form }}
    <div class='table'>
      <table class='no_error'>
        <input id="id_mypost_set-0-title" type="text" name="mypost_set-0-title" />
        <input id="id_mypost_set-0-content" type="text" name="mypost_set-0-content" />
      </table>
    </div>
    <input type="button" value="Add Other" id="add_more">
    <script>
        $('#add_more').click(function() {
            cloneMore('div.table:last', 'mypost_set');
         });
    </script>
</form>

В файле JavaScript:

function cloneMore(selector, type) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + type + '-TOTAL_FORMS').val();
    newElement.find(':input').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;
        $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
    });
    newElement.find('label').each(function() {
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
        $(this).attr('for', newFor);
    });
    total++;
    $('#id_' + type + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
 }

Проблема с селектором: «Клон оригинального HTML-кода работает нормально», но клон из клонированного фрагмента кода помечает селектор как «неопределенный», другими словами, во второй раз, когда я клонировать таблицу, в которой селектор больше не работает для этих клонированных элементов.

Проблема только для IE.

Чего мне не хватает? Любая подсказка приветствуется:)

Answer 1

Это известная ошибка jQuery , хотя они утверждают, что она исправлена.
Один из вариантов здесь - использовать .html() и клонировать их вручную. Это не приведет к клонированию событий и сохранит .data, что может быть проблемой для вас. .live может помочь, если у вас есть события здесь.

Если единственное, что вам нужно, это изменить имена и идентификатор, то лучшим вариантом является использование регулярного выражения (это клонирует события из первого элемента, обратите внимание):

var name = $(this).attr('name').replace(/-\d+-/,'-' + total + '-');

это будет искать -number- и заменять его, чтобы найти последний номер во всех браузерах, или -0- в IE.

Вот рабочая демонстрация с предупреждениями: http://jsbin.com/evapu

Как примечание: ваш код немного запутан. Код jQuery должен быть внутри $(document).ready (щелчок), у вас есть таблица без тела (без <tr>, <td> - входные данные выбрасываются), и код имеет некоторые дубликаты. Хотя в этом случае это не помогло, недопустимый DOM и отсутствие события ready могут вызвать проблемы.

Answer 2

вам не хватает скрытого ввода с идентификатором 'id_' + type + '-TOTAL_FORMS' - вы получаете общее количество от этого объекта и используете его для изменения имени и идентификатора клонированных объектов.

Я попробовал ваш код с этим:

<input type="hidden" id="id_mypost_set-TOTAL_FORMS" value="1"/>

добавлено сразу после

<form method="post" action="/post/add/">

и все работает правильно, все новые входы имеют правильные идентификаторы. это действительно работает в FF ??

Answer 3

Ваш код отлично работает во всех браузерах, как указано ранее Тем не менее, если бы вы могли заменить:

var newElement = $(selector).clone(true);

с:

var newElement = $($(selector).html());

и посмотрите, поможет ли это.

Кроме того, заново прикрепите обработчик событий, вот так.

newElement.bind(EVENT, function() {});

Или воспользуйтесь соответствующим помощником.

Answer 4

возможно, вы можете использовать эту функцию клона:

/*
 * Clone method
 * Prevents reference problem
 */
clone: function( obj ){
  if(obj == null || typeof(obj) != 'object')
    return obj;
  var temp = new obj.constructor();
  for(var key in obj)
    temp[key] = clone(obj[key]);
  return temp;
}