Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Прошу помощи, грамотное размножение куска кода (https://javascript.ru/forum/jquery/8194-proshu-pomoshhi-gramotnoe-razmnozhenie-kuska-koda.html)

M2_ 14.03.2010 01:38

Прошу помощи, грамотное размножение куска кода
 
Приветствую всех!
Раньше особо не писал на javascript, так, небольшие скриптики для красоты. Повстречал jQuery, вот сейчас занят довольно большим и интересным проектом и хотелось бы реализовать одну штуку на jQuery.

Собственно, имеем необходимость создать фильтрацию для некоторого определенного массива. В рамках вопроса - формирование необходимой GET-строки.

хотелось бы чтобы это выглядело вот так:
<div class='filterItem'>
  <select>
    <option></option>...несколько штук
  </select>
  <input type='text' name='filterName' />
</div>
<a href="#" >добавить условие</a>

<input type='submit'>


Функционал:
- (сделано) при выборе чего-нибудь из выпадающего списка менялся атрибут поля ввода
- при нажатии на "добавить условие" добавляется еще select, input и маленький крестик для того чтобы убрать условие (т.е. чтобы div множился)
- при нажатии на сабмит данные передаются в GET, дальше фильтрацией займется php.

хотелось бы, чтобы это было на jQuery

Заранее спасибо за ответы

M2_ 14.03.2010 03:12

пробовал метод clone(), но видимо для этого случая он недостаточно гибок.
Сделал вот так:
$("#addFilter").click(function() {
  filterDiv = $('div.filterItem:first').html();
  $('.filterItem:last').after("<div class=\"filterItem\">"+filterDiv+"</div>");
});


Клонирую такой вот div, содержащий следующее:
<select>
...
</select>
<input />
<a class='deleteFilter'>Удалить</a>


Проблема в том, что в клонированном элементе не работает уже ссылка Удалить.

M2_ 14.03.2010 03:35

пробовал метод clone(), но видимо для этого случая он недостаточно гибок.
Сделал вот так:
$("#addFilter").click(function() {
  filterDiv = $('div.filterItem:first').html();
  $('.filterItem:last').after("<div class=\"filterItem\">"+filterDiv+"</div>");
});


Клонирую такой вот div, содержащий следующее:
<select>
...
</select>
<input />
<a class='deleteFilter'>Удалить</a>


Проблема в том, что в клонированном элементе не работает уже ссылка Удалить.

sysya 14.03.2010 07:26

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

M2_ 14.03.2010 14:21

спасибо за наводку, про live надо почитать
Все решилось путем clone(true), где true позволяет склонировать и все эвенты для клонируемых элементов.


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