Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Как задать событие onclick


Автор: artuska 5.11.2008, 22:18
Есть ХТМЛ-код:
Код

<dl id="n_1">
 <dt><label for="size">Размеры:</label></dt>
 <dd><input type="text" id="size" name="size[]" value="" /> <button>+</button></dd>
</dl>


Запускаем jQuery'евское событие clone(), чтобы клонировать этот код и создать такое же поле столько раз, сколько нажимаем на кнопку с плюсиком (здесь неполный код, только принцип):

Код

var cloned = $('#n_1').clone();
$('#n_1').after(cloned);


Теперь я хочу задать кнопочке <button> событие onclick — например, onclick="alert('Button is clicked')". Пишу так:
Код

clone.find('button').attr("onclick", "alert('Button is clicked')");


Но событие не работает!
Или события задаются иным путем, не через attr()?

Например, если мне нужно задать аттрибут value для инпута, то я просто пишу attr('value', 'Какое-нить значение');
Точно так же пытаюсь задать и аттрибут onclick, но ничего не выходит. Сталкивался кто-нить с такой проблемой?

Добавлено через 8 минут и 54 секунды
Причем в ДОМ-эксплорере явно показано, что событие onclick этой нашей кнопочке благополучно задалось!
http://ipicture.ru/

Автор: IDVsbruck 6.11.2008, 02:00
Код
clone.find('button').onclick = function() {alert('Button is clicked')"); return false;};

А раз уж ты юзаешь jQuery, то почему не прочесть про события? - Там очень мощная реализация (и совершенно кроссбраузерная!). Для простых событий можно делать двумя способами (цитирую):

1. "click(fn)
возвращает: jQuery
Связывает функцию с событием click для всех элементов набора. Событие click наступает, когда кнопка указывающего устройства (например мышь) кликнута на элементе. Клик определяется как mousedown + mouseup в некотором месте экрана."

2. "bind(type, [data], fn)
возвращает: jQuery
Связывает обработчик с одним или более событиями (например click) для каждого элемента набора. Может также связывать пользовательские события. Возможные события: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error. Обработчик события принимает объект событие, что делает возможным предотвращение поведения по умолчанию. Чтобы предотвратить и поведение по умолчанию и "всплывание" события (т.е. передачу события от одного элемента другому), обработчик должен возвращать false."

Автор: artuska 6.11.2008, 14:52
Да, это элементарно!
Код

$(document).ready(function(){
 $('#myDivWithForm').find('button').click(function(){
  alert('Bla-bla-bla');
 });
});


Ошибок нет, но вот не работает тоже и все. Пробовал убирать Докюмент.рэди, пробовал не click, а each и bind пробовал, но не работает, хоть убей. jQuery просто не видит динамически созданные элементы, вот и все — не видит он эти <button>. Поэтому пытаюсь сразу при создании <button> повесить на нее событие, но не выходит.

Автор: ksnk 6.11.2008, 15:56
$(document).ready
отрабатывает один раз после загрузки всей страницы.

Если клонированные кнопки добавляются после этого, никто на них дополнительных кликов не поставит...

Автор: artuska 6.11.2008, 17:54
Я же говорю
Цитата(artuska @  6.11.2008,  14:52 Найти цитируемый пост)
Пробовал убирать Докюмент.рэди, 


Пробовал я и без $(document).ready, нифига...

Автор: ksnk 6.11.2008, 19:51
А вт так
Код

$('#n_1').clone().removeAttr('id').insertAfter('#n_1').click(function(){
  alert('Оппа!')
});

пойдет?

Автор: artuska 7.11.2008, 03:58
Ура! Да, пойдет!
Минимально переделал и все работает:
Код

clone.find('button').removeAttr('onclick').click(function(){ alert('Здесь идет код') });


Спасибо тебе,  ksnk!
Вопрос помечаю как решенный.

Мдя, нету у меня 100 постов — но, всеравно, плюс тебе, ksnk.

Автор: IDVsbruck 7.11.2008, 04:24
Интересно, чем это можно объяснить?

Автор: ksnk 7.11.2008, 08:51
artuska, 
.removeAttr('id')
Я там написал не от того, что у меня на клавиатуре лишние буквы . При клонировании ID тоже клонируется и после нескольких вставок можно запутаться в этих батонах с одинаковым именем.

IDVsbruck
clone.find('button').onclick=function... - добавит свойство onclick в объект jQuery. Оттого и не работало, наверное smile

Автор: artuska 7.11.2008, 18:06
Цитата(ksnk @  7.11.2008,  08:51 Найти цитируемый пост)
.removeAttr('id')

Да-да, насчет айдишки знаю — одинаковые нельзя, но я уже перед тем, как задавать событие для <button>, делаю некоторые действия с клонированными полями, одно из них — инкрементирую айдишку (#id_2, #id_3, ... #id_n).

Потом у меня все те кнопочки с минусами, при нажатии удаляют всю строку вместе с собой:
http://ipicture.ru/

Автор: IDVsbruck 7.11.2008, 19:32
Цитата(ksnk @  7.11.2008,  08:51 Найти цитируемый пост)
clone.find('button').onclick=function... - добавит свойство onclick в объект jQuery. Оттого и не работало, наверное 

Ну да, ну да ... это верно. Я понял, что надо было или объекту назначать onclick, или jquery-объекту click. Просмотрел, где было сделано и то, и другое smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)