Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Замена DOM элемента другим элементом (https://javascript.ru/forum/events/37686-zamena-dom-ehlementa-drugim-ehlementom.html)

MaxXxaM 01.05.2013 19:10

Замена DOM элемента другим элементом
 
Всем привет! Впервые задаю вопрос на данном форуме, строго не судите :)
Проблема заключается в следующем. Сейчас я занимаюсь стилизацией элементов select, checkbox и др. и для этого мне конечно же потребовалась замена одного DOM элемента формы на другой.
Приведу пример:

<input type="checkbox" name="tmp[]" class="my_chb">


При замене данного элемента, воспользовавшись jQuery .replaceWith() конструкцией:

<div>
   <input type="checkbox" name="tmp[]" class="my_chb">
<div>


Результат замены правильный (HTML), но происходит следующее - один DOM элемент my_chb заменяется другим элементом с тем же именем, происходит перекрытие и при подтверждении формы в массиве POST данных о том что данный checkbox установлен нет. Т.е. он ведет себя как не стандартный checkbox. Каким образом можно удалить из памяти старый элемент и заменить его новым?

Аналогичная проблема происходит с select. Только в данном случае если имя задано как sel[] - массив отправляются 2 элемента - старый и новый. Происходит наращивание, что естественно приводит к неверному результату.

Думаю, что решение не заменять элемент аналогичным, а просто скрывать и после него дописать свою структуру. Минус данного вариант в том, что придется переработать весь код :( что конечно же очень не хочется.

Если кто-нибудь сможет предложить вариант замены элемента одного элемента другим, буду очень признателен!
Заранее спасибо!

danik.js 01.05.2013 19:27

Стандартная схема такая: делаем нативный чекбокс невидимым (причем display:none не прокатит), добавляем элементы для стилизации. При "чекании" элемента просто меняем checked исходного чекбокса. Так что массив элементов (контролов) формы остается неизменным -> нет никаких проблем.

MaxXxaM 02.05.2013 15:51

Цитата:

Сообщение от danik.js (Сообщение 248697)
Стандартная схема такая: делаем нативный чекбокс невидимым (причем display:none не прокатит), добавляем элементы для стилизации. При "чекании" элемента просто меняем checked исходного чекбокса. Так что массив элементов (контролов) формы остается неизменным -> нет никаких проблем.

Спасибо, да я знаю о таком решении, я об этом написал, но остается проблема переработки кода. Искал решение поэлегантнее...
Единственное, не понял почему display:none не прокатывает? Манипуляции над элементом с таким атрибутом не принимаются во внимание?

danik.js 02.05.2013 20:14

C display:none элемент не может иметь фокус, поэтому по табу до него не добраться.

tenshi 03.05.2013 12:28

http://api.jquery.com/wrap/

Aetae 04.05.2013 01:24

Есть нормальный replaceChild.


Часовой пояс GMT +3, время: 15:51.