Делегирование
Пытаюсь создать событие при клике на созданном option с помощью вывода ajax.
Пример есть два select <select id="select_one"> <option selected="selected">Выберите раздел</option> <option id="82" class="option_id_one">Мягкая мебель</option> <option id="83" class="option_id_one">Гостиная</option> <option id="96" class="option_id_one">Кухни</option> <option id="104" class="option_id_one">Спальня</option> </select> <select id='select_two'> </select> во второй селект я вывожу option из базы допустим после того как мы выбрали раздел второй селект получился : <select id="select_two"> <option id="156" class="option_id_two">Табуреты</option> <option id="97" class="option_id_two">Кухонные гарнитуры</option> <option id="98" class="option_id_two">Стулья</option> <option id="99" class="option_id_two">Столы</option> <option id="101" class="option_id_two">Кухонные уголки</option> <option id="179" class="option_id_two">Шкафы</option> </select> далее мне надо повесить событие клика по option с классом option_id_two пытаюсь сделать следущим образом:
$('#select_two').on('click', '.option_id_two', function() {
alert('Привет');
});
но он мне alert не выводит (сам вывод option во второй select работает корректно, но делегирование мне не поддаеться) Помогите парни пожалуйста.:help: |
если надо то вот вывод во второй селект
$('.option_id_one').click(function (){
id = this.id;
$.post("/netcat/modules/default/tegs-vivod-podrazd.php",
{
id:id,
},
function(data)
{
document.getElementById('select_two').innerHTML = data;
}
);
});
|
$('#select_two').change(function() {
alert(this.value);
});
|
вооооуууу спасибо большое все вышло как надо:dance:
|
блин нет все равно не правильно. мне нужно событие именно на нажатие
элемента с классом option_id_two я так понял что это возможно только через делегирование но у меня не получаеться |
Щелчок по селекту не имеет смысла.
Чтобы гарантировано был change, нужен item по умолчанию который не имеет значения. Например "----", или там "Выберите табуретку". |
Ну да, как в первом селекте у вас сделано - так и продолжайте добавлять дефолтное значение на которое нельзя получить данные, ну или придут те же самые.
Да, кстати, а что будет внешне с селектом, если ему программно засандалить selectedIndex=-1? Я как-то делал, уже забыл. Но тогда, вроде, не нужен пустой item. Любой выбор дает дает change, поскольку selectedIndex начинается с 0. |
хоршо а если у меня появилось несколько дивов например
<div class='otpravka'> <span>1 значение</span> <div class='otpracit'>Отправить</div> </div> <div class='otpravka'> <span>2 значение</span> <div class='otpracit'>Отправить</div> </div> <div class='otpravka'> <span>3 значение</span> <div class='otpracit'>Отправить</div> </div> мне нужно повесить событие клика на кнопку отправить |
Все правильно, вот что будет http://learn.javascript.ru/play/uTrs1b
селект будет kinda empty, но зато ченч сработает гарантировано. Кстати, а кто знает как сделать чтобы код выполнялся в теме? Я все пункты тут проверил в навигации - нет ничего похожего. |
Цитата:
|
не не не чуточку меня не понял вот подробнее :)
допустим есть кнопка и див в который мы выводим <div class='vivod'>Вывести</div> <div class='all-form'> </div> далее с помощью события я вывожу несколько дивов
$(document).ready(function(){
$('.vivod').click(function (){
$.post("/netcat/modules/default/tegs-vivod-tovar.php",
{
podrazdel:podrazdel
},
function(data)
{
document.getElementById('all-form').innerHTML = data;
}
);
});
В файле tegs-vivod-tovar.php идет вывод дивов. и вывели мы в див с классом all-form далее у меня появляються такие дивы
<div class='all-form'>
<span>1 значение</span>
<div class='otpravit'>Отправить</div>
</div>
<div class='otpravka'>
<span>2 значение</span>
<div class='otpravit'>Отправить</div>
</div>
<div class='otpravka'>
<span>3 значение</span>
<div class='otpravit'>Отправить</div>
</div>
</div>
теперь мне нужно событие при нажатии на кнопку с классом otpravit пример:
$('.otpravit').click(function (){
alert('Привет');
});
но он не работает т.к. при создании страницы данных дивов нет и он не понимает к кому его заставляют обратиться и как вот справиться мне с данной проблемой |
Чуваки с SO подсказывают: http://learn.javascript.ru/play/m6Ixl
нулевый елемент делается кроме того disabled и его попросту нельзя выбрать. Еще можно засунуть все в optgroup кстати. |
Цитата:
|
извени не понял тебя(
куда вешать? |
впринцапе можно сделать вот так
$.post("/netcat/modules/default/tegs-vivod-tovar.php",
{
podrazdel:podrazdel
},
function(data)
{
document.getElementById('all_tovar').innerHTML = data;
$('.otpravit').change(function() {
alert('Привет');
});
}
);
и тогда будет работать. но там будут еще различные события и тогда придеться писать внутри внутри и внутри событий. а так не устраивает(((( |
У вас родительский контейнер существует отродясь или аяксом зарождается?
<div class='all-form'> на него вешаете обработчик щелчка и затем все что внутри появится будет доступно как я понимаю по event.target. |
да он у меня есть изначально
Цитата:
|
document.getElementById('all_tovar').innerHTML = data;
То есть список как хтмл что ли приходит? Ну зашибись. Ну ищите тогда чудесное преследование, или как там - делегирование в сферического коня. Сделайте разметку под интерфейс, сделайте родителей, скройте что еще не имеет значения, получайте данные в json, делайте детей родителям и не придется искать пятое колесо зайцу. То есть каноничный способ только через аякс. Вместо перезагрузок с рендером - подгрузка с рендером. |
:thanks: ладно спасибо большое за помощь попробую как нибудь разобраться;)
|
Кстати, говорят на js есть такая хуерага как ShadowDom. Дом Теней внатури, ну, то есть ob_start().
Цитата:
|
я уже делал такое и все нормально работало
примерно как то так
$('.all-tovar').on('dblclick', '.save-but', function() {
alert('Привет');
});
но сейчас почему то он не работает а консоль говорит TypeError: $(...).on is not a function $('.all-tovar').on('dblclick', '.save-but', function() { |
В принципе щелчок можно повесить прямо на body и следить по цели откуда он пришел.
|
Цитата:
|
Цитата:
я извеняюсь но я вас не понял |
блиииииииииииииин ты гений тоьлко сейчас увидел =DDDDD у меня сдесь была подключена библиотека 1.7.1 а данная функция работает только с версии 1.7.2
поставил новую версию и все заработало огромное спасибо что помог |
| Часовой пояс GMT +3, время: 02:29. |