Удаление лишних символов при выборе списка и дублирование текста в список LI
 

Доброго дня форумчани!

Ситуация:
Есть некий список select он преобразуется через jQuery в выпадающее меню.

исходник jQuery автор Dimox

Все работает безупречно.. Параметры соблюдаются, подгрузка через JSON, Ajax так же не нарушает сцепки CSS и DOM элементов. Но проблема появилась там где не ждали..

Список:

<select name="category_name">
  <option value="1">Категория 1</option>
  <option value="2">&nbsp;&nbsp;Категория 2</option>
  <option value="3">&nbsp;&nbsp;&nbsp;&nbsp;Категория 3</option>
  <option value="4">Категория 4</option>
</select>

Символ   устанавливается для визуального восприятия Родительная->Дочерняя категория. Т.е. чем выше уровень последней категории тем больше пробелов от края.

Т.к. вложенность не особо большая но данный формат оказался удобным, пришлось остановиться на нем.

И так суть проблемы:

Нашел у jQuery .replace() вот такую замечательную штуку..

и не могу понять если делать через

.each(function() {...

то результат проходит на GET элементы, новые которые только созданы DOM списки не воспринимают функцию.. + работает как положено только на 1-м элементе

$('.jq-selectbox').each(function(){ // оболочка списка DIV
	$('.jq-selectbox__select-text').each(function(){ // DIV где нужный текст
		var str = $(this).text();
		str = str.replace(/\s+/g," "); 
		$(this).text(str);
	});
});

если делать через

.change(function(){...

то не особо выходит с новыми DOM элементами..

в чём проблема то?

))
проблема в том что
если меняем выбранный пункт - отказ
если создаем новый список DOM - отказ

по сути обрабатывает после перезагрузки страницы.

Выходит как качели..

если делать через

.change(function(){...

на голый (без оформления) select список - все ровно работает

Если на список UL > LI так же голый - все нормально работает

Но если делать как в моем случае на базе SELECT создаем DOM UL>LI то начитает тупить.

Просто чувствую что. что то упустил.. не могу понять что

Infinity178,
увы так и не понял вашей проблемы - может ещё как-то проще обьясните?

Причина в том, что обработчик события устанавливается элементу при загрузке странице. А у вас надо полагать проблема с динамически создаваемыми элементами (UL), а им эти обработчики естественно не установлены. Нужно делегировать обработчик ближайшему родителю, который гарантированно есть на странице.

laimas,
а пробелы то чем мешают человеку, не подскажешь? :)

при загрузки страницы
http://prntscr.com/6g8iwt

при изменении списка
http://prntscr.com/6g8j2i

при добавлении нового списка
http://prntscr.com/6g8j7f

- - - - - -
я правельно понимаю что нужно .each(.. привязать к HTML
и грубо вывести след. логику:

$('div.case').each(function(){
$(this).find('select).....
или
$(this).find('div').has(' ')...
});

а пробелы то чем мешают человеку, не подскажешь?

Думаю это опустить можно, это может написано по незнанию )

Я читаю - родители есть, проблем нет, а если создать новый, то проблемы.

Infinity, давайте на пальцах - у вас одновременно с загрузкой страницы загружается список А, и с ним нет проблем. Затем вы запрашиваете север, получаете данные и строите по ним второй список Б, важно(!) полностью, то есть <select><option></option></select> или <ul><li></li></uL>, что в общем не важно, добавляя его на страницу и с этим списком возникают проблемы. Так? Какие проблемы - он не обрабатывается обработчиком по событию onchange?

Infinity178,
можно узнать в чём проблема с пробелами ? или это останется тайной