Метод jQuery clone перемещает вложенный элемент ввода за пределы родительского

Question

Метод jQuery clone перемещает вложенный элемент ввода за пределы родительского

0

Я пытаюсь использовать метод клонирования jQuery для дублирования элемента ввода столько раз, сколько необходимо. Элемент ввода вложен в тег fieldset и другие теги div. Проблема в том, что клонированная группа элементов выходит в другом порядке. Что еще более важно, элемент INPUT больше не вложен в место, где он был, и это нарушает пользовательский интерфейс.

например, оригинальная структура (упрощенная)

<fieldset><div><input /></div></fieldset>

Клонированный исход:

<fieldset><div></div></fieldset><input />

Вот ссылка JSfiddle, показывающая проблему в действии: jsfiddle

Wairowe 30 апр. 2014, в 11:19

Источник

0

это из-за использования селекторов, так как вы используете .find() и andSelf() соответствующий набор элементов, который используется в insertBefore() , отличается от того, который был возвращен clone() - jsfiddle.net/arunpjohny/ VRRuf / 1
Arun P Johny 30 апр. 2014, в 08:54

Теги:

jquery

clone

1 ответ

Ещё вопросы

это из-за использования селекторов, так как вы используете .find() и andSelf() соответствующий набор элементов, который используется в insertBefore() , отличается от того, который был возвращен clone() - jsfiddle.net/arunpjohny/ VRRuf / 1

Rory McCrossan · Accepted Answer · 2014-04-30T05-51-00.000Z

Проблема связана с тем фактом, что вы используете инкрементные атрибуты id и пытаетесь вычислить следующий в последовательности "на лету". Это всегда проблематично и редко является лучшим решением.

Используйте атрибуты class для группировки похожих элементов - для чего они предназначены. Ваш код становится намного проще.

<div id="insert-placeholder"></div>
<fieldset class="template-image-upload-wrapper">
    <legend>Image upload</legend>
    <div class="form-group">
        <div class="col-md-12">
            <input class='template_image_upload' class='form-control input-md' title='Upload an image.' name='editPage' type='file' value='' /> 
            <span class="help-block"></span>    
        </div>
    </div>
</fieldset>

$(".template-image-upload-wrapper").clone(false).insertBefore("#insert-placeholder");

Обновленная скрипка

Или просто внесите изменения в атрибут после вставки элемента: jsfiddle.net/oGeez/7fxZ4/2
@oGeez Я не говорю, что невозможно добиться того, что пытается сделать ОП, я просто советую против этого, так как это приводит к увеличению головной боли. Использование классов намного проще и лучше семантически.
Нет, я согласен, поэтому я не опубликовал свой комментарий в качестве ответа. Ваш голос от меня.
@oGeez - Спасибо! это было быстро и, безусловно, решило проблему пользовательского интерфейса, но теперь без уникальных идентификаторов, как я могу ссылаться на различные клонированные элементы?
@ Wairowe А? Это ответ Рори. Однако существуют способы нацеливания на определенные элементы в классе: jsfiddle.net/oGeez/7fxZ4/3
Ops! извини, я имел в виду Рори. Я придумал это: mClone = $ (". Template-image-upload-wrapper"). Clone (false) .insertBefore ("# insert-placeholder"); mClone.find ("input"). attr ('id', 'image-upload -' + idx);
@RoryMcCrossan спасибо за ответ! Мне особенно нравится, как вы упростили мой код.