Ошибка jQuery clone () FireFox - невозможно отправить клонированную форму - PullRequest
Новая
       6

Ошибка jQuery clone () FireFox - невозможно отправить клонированную форму

7 голосов
/ 23 ноября 2010

Я хочу добавлять / удалять динамически формы.Я использую формы, которые хранятся в таблице, каждая строка имеет форму.У меня есть 2 таблицы: - отображаемая - окруженная временной строкой, которую я хочу клонировать и вставить в отображаемую таблицу.

В IE все работает нормально, но клонированная строка имеет свою формуFirefox не может быть представлен.Если я не клонирую строку, а просто вставляю ее, я могу отправить форму, но мне нужно иметь возможность повторно использовать эту строку, чтобы вставить ее снова, поэтому мне нужно использовать клонирование.HTML-код, созданный с клонированием и без него, в Firebug выглядит одинаково.Как я могу преодолеть эту проблему?

Код, используемый для клонирования и вставки строки: $('#tempRow').clone().insertAfter($('#templatesTable tr:last'));

1 Ответ

7 голосов
/ 23 ноября 2010

Вы не можете надежно клонировать что-либо с атрибутом ID и повторно вставить его в DOM. Это создает недействительный документ HTML, потому что у вас есть два элемента с одинаковым идентификатором. Firefox ведет себя правильно.

Что вам нужно сделать, это клонировать форму, а затем изменить ВСЕ идентификаторы на что-то уникальное (форма и все входные данные и дочерние элементы). Тогда вы сможете отправить форму.

Похоже, вы клонируете элемент tr и вставляете его в таблицу? Если элемент tr является единственным с идентификатором, это будет работать: 

$('#tempRow')
    .clone()
    .attr('id', 'tempRow-new')
    .insertAfter($('#templatesTable tr:last'));

Помните, однако, что если элемент формы - или любой из его дочерних элементов, включая div, frameset, input и т. Д. - имеет идентификатор, вам нужно либо удалить этот идентификатор, или измени его. В противном случае у вас все еще будет недействительный документ, и у вас могут возникнуть проблемы.

Дополнительно

Приведенный выше фрагмент кода не подлежит повторному использованию. Как только вы попытаетесь клонировать форму во второй раз, у вас будет два элемента с идентификатором tempRow-new. Если вам нужно клонировать строку несколько раз, вам придется добавить некоторый инкрементный номер или некоторый UUID, чтобы гарантировать, что все клонированные элементы уникальны.

...