Удаление лишних символов при выборе списка и дублирование текста в список LI
Доброго дня форумчани!
Ситуация: Есть некий список select он преобразуется через jQuery в выпадающее меню. исходник jQuery автор Dimox Все работает безупречно.. Параметры соблюдаются, подгрузка через JSON, Ajax так же не нарушает сцепки CSS и DOM элементов. Но проблема появилась там где не ждали.. Список: <select name="category_name"> <option value="1">Категория 1</option> <option value="2"> Категория 2</option> <option value="3"> Категория 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,
можно узнать в чём проблема с пробелами ? или это останется тайной |
Цитата:
|
Infinity178,
не могу увидеть проблему |
эхх.....
ну поехали с самого начала, на пальцах. 1. Загружается документ 2. Подгружаются данные списков, стили и т.п. 3. После фул загрузки страницы включается обработчик SELECT и добавляет DOM список (DIV > UL > LI) и заполняет список LI с OPTION 4. OPTION:SELECTED помещается путем обработчика в DIV который по сути стоит над UL > LI пример:
<select>
<option value="">text test 1</option>
<option value="" selected="selected">text test 2</option>
<option value="">text test 3</option>
</select>
<div class="jq-select-wrap">
<div class="jq-select-text">text test 2</div>
<div class="jq-select-list">
<ul>
<li>text test 1</li>
<li class="sel">text test 3</li>
<li>text test 3</li>
</ul>
</div>
</div>
Дальше у нас в списке <option>...</option> некоторые пункты имеют пробелы перед названием и нам нужно их удалить. Включаем replace, функция запускается одновременно с обработчиком DOM списка, тут я нашел два пути: А: Мы берем .text() из выбранного пункта option:selected убираем лишнее и вставляем в DIV (в примере: div.jq-select-text) - минус: не работает на вновь создавшихся списках В: Мы берем .text() из div.jq-select-text и убираем лишние символы, работает на всех списках, но при изменении option:selected функция replace игнорирует нужный div. |
У вас стилизация выпадающего списка (подмена его) посредством ul li, при этом выпадающие списки скрываются, тогда зачем вы вставляете в эти списки эти пробелы, если их надо удалит в LI?
Я сперва не понял - по базе SELECT ..., воспринял как запрос к базе и выдача для списка, так как тут и ajax и .... в общем все в куче. |
в том то и дело что пробелы должны сохраниться в LI и только в выбранном пункте их не должно быть. Ема ё - ну хоть кто нибудь смотрел скрины???
|
По мультикам не всегда видна истина )
Тут надо знать как организован выбор в этом стилизованном списке, если это помещение выбранного LI в верх списка (остальные после выбора скрываются), то нужно запоминать текст его в data, чтобы потом восстановить, а для показа удалить пробелы. Если выбранное значение хранит другой элемент, то удалять пробелы из помещаемого в него текста. |
Цитата:
http://learn.javascript.ru/play/WGCLgb |
Infinity178,
долго молчал партизан :cray: |
:) так теперь вопрос на засыпку - я правельно понял что чистка пробелов происходит в styler() - ?
только эту строчку добавили?
if (el.val() === '') {
divText.text(selectPlaceholder).addClass('placeholder');
} else {
divText.text(optionSelected.text().replace(/\s+/g,''));
}
|
Infinity178,
строки 675 и 419 по ссылке в 17 посте файл jquery.formstyler.js |
| Часовой пояс GMT +3, время: 04:56. |