jQuery для начинающих. Часть 6. События

Прежде чем приступить к прочтению данной статьи, стоит определиться, что из себя представляют события — для web-странички, событиями будут являться любые действия пользователя – это и ввод данных с клавиатуры, и передвижения мышки, и конечно же “клики” – всё это и есть события. К событиям можно еще отнести события создаваемые скриптами, т.н. триггеры.

Материалы данной статьи включены в учебник «jQuery для начинающих». Учебник распространяется бесплатно, и сопровождается интерактивными примерами.

Базовые события

Начнем с азов. jQuery работает практически со всеми событиями в JavaScript’е, приведу список функции с небольшими пояснениями:

change — измение значения элемента (значение, при потери фокуса, элемента отличается от изначального, при получении фокуса)
click — клик по элементу (порядок событий — mousedown, mouseup, click)
dblclick — двойной клик по элементу
resize — изменение размеров элементов
scroll – скроллинг элемента
select — выбор текста (актуален только для input[type=text] и textarea)
submit — отправка формы
focus — фокус на элементе – актуально для input[type=text], но в современных браузерах работает и с другими элементами
blur — фокус ушел с элемента – актуально для input[type=text] — срабатывает при клике по другому элементу на странице или по событию клавиатуры (к примеру переключение по tab’у)
focusin — фокус на элементе, данное событие срабатывает на предке элемента, для которого произошло событие focus
focusout — фокус ушел с элемента, данное событие срабатывает на предке элемента, для которого произошло событие blur
keydown — нажатие клавиши на клавиатуре
keypress — нажатие клавиши на клавиатуре (порядок событий — keydown, keypress, keyup)
keyup — отжатие клавиши на клавиатуре
load — загрузка элемента (img)
unload — выгрузка элемента (window)
mousedown — нажатие клавиши мыши
mouseup — отжатие клавиши мыши
mousemove — движение курсора
mouseenter — наведение курсора на элемент, не срабатывает при переходе фокуса на дочерние элементы
mouseleave — вывод курсора из элемента, не срабатывает при переходе фокуса на дочерние элементы
mouseover — наведение курсора на элемент
mouseout — вывод курсора из элемента

Опробовать события можно на примере с событиями мышки и элементами формы.

Большинство из перечисленных событий можно имитировать непосредственно из самого скрипта:

<script lang="javascript"> $('#menu li').click(); </script>

Триггеры

Для работы с триггерами в jQuery предопределены следующие функции:

bind (type, data, fnc) — добавляет обработчик событий
one (type, data, fnc) — добавляет обработчик событий, который сработает лишь раз
trigger (event, data) — вызывает обработчики событий
triggerHandler( event, data) — вызывает обработчики событий, без вызова события браузера
unbind (type, fnc) — удаляет все обработчики событий с элемента

$('.class').bind('click', function(){
    // что-то делаем
});
 
// вызываем обработчик
$('.class').trigger('click');
 
// отключаем обработчик
$('.class').unbind('click');

Можно повесить триггер почти на любой объект:

var obj = {
    test:function() {
        console.log('obj.test');
    }
}
 
$(obj).bind('someEvent', function(){
   console.log('obj.someEvent');
   this.test();
});
 
$(obj).trigger('someEvent');

Пространство имен

Обычно, когда мы хотим создать/удалить свой обработчик событий, мы пишем следующий код (чуть выше я об этом уже писал):

// создаем свой обработчик
$('.class').bind('click', function(){
    // что-то делаем
});
// удаляем все обработчики
$('.class').unbind();

Но как всегда, есть ситуации когда нам необходимо отключить не все обработчики (как пример, надо отключить обработку какого-то контрола определенным плагином), в этом случае нам на помощь приходят пространства имен, использовать их достаточно легко:

// создаем обработчик
$('.class').bind('click.namespace', function(){
    // что-то делаем
});
 
// вызываем обработчик
$('.class').trigger('click.namespace');
 
// удаляем все обработчики в данном пространстве имен
$('.class').unbind('click.namespace');

Еще примерчик, вешаем обработчик, который выводит текст в консоль.

$('.class').bind('click.namespace', function(){
    console.log('bang');
}); 
$('.class').trigger('click.namespace'); // вызываем событие, наш обработчик сработает
$('.class').trigger('click');           // тоже работает
$('.class').trigger('click.other');     // событие из другого пространства имен, наш обработчик не будет вызван

Так же, есть поддержка нескольких пространств имен (с версии 1.3, если быть точным):

$('.class').bind('click.a.b', function(){
    // для пространств a и b
}); 
$('.class').trigger('click.a'); // вызываем обработчик из пространства a
$('.class').unbind('click.b');  // отменяем обработчик для пространства b

Можно одним махом удалить все обработчики с определенного пространства имен:

$('.class').bind('click.namespace', function(){}); // обработчик клика
$('.class').bind('blur.namespace', function(){});  // обработчик фокус
$('.class').unbind('.namespace'); // передумали, и все отменили

Работа с live

Очень часто при генерации страниц AJAX’ом возникает необходимость повесить обработчики событий на новые элементы в DOMе, для этой цели служит метод live (первый параметр — имя события, второй — обработчик).

Приведу пример — есть следующая задача:

все внутренние ссылки на страницы должны подгружать контент AJAXом в элемент с id=content
правило №1 верно для ссылок из подгруженного контента

Реализовать первое требование достаточно просто:

$('a[href^=/]').click(function(event){
    $('#content').load($(this).attr('href'));
    return false; // эквивалентно вызову event.preventDefault(); и event.stopPropagation();
});

Выполнить второе правило тоже легко, достаточно слегка модифицировать предыдущий пример:

$('a[href^=/]').live('click', function(event){
    $('#content').load($(this).attr('href'));
    event.preventDefault(); // отменяем действие по умолчанию, но не трогаем bubbling - чтобы не мешать другим обработчикам
});

Поддерживаемые события: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup, change, submit, focusin, focusout, mouseenter, mouseleave
Нет поддержки: blur, focus, change, submit

В противовес функции live существует функция die — она убирает отслеживание событий для вновь появившихся элементов.

Хотелось бы отдельно остановиться на принципе работы метода live — данный метод работает благодаря т.н. «всплытию» событий в DOMе — т.е. когда вы кликаете на любом элементе на странице, то в первую очередь событие сработает на этом элементе, если обработчика события нет, или он не говорит, что дальше «всплывать» не надо (сказать он это может так event.stopPropagation()), то событие идет вверх по DOM дереву и инициализирует обработчики у родительского элемента, и так далее пока не достигнет корня — document’a. Таким образом метод live вешает обработчик событий на document, и затем анализирует каждое событие на предмет наличия элементов описанных вами. Это конечно не самый быстрый способ, но его можно ускорить используя метод delegate, его отличие от live только в том, что вы указываете элемент на который вешаете обработчик «live» событий, таким образом пример выше можно записать так:

$('#content').delegate('a[href^=/]', 'click', function(event){
    $('#content').load($(this).attr('href'));
    event.preventDefault();
});

Touch события

Смартфоны с большим сенсорным экраном — это уже не редкость, вот и web-индустрия начинает адаптироваться под пользователей того же iPhone, если же вам понадобилось подобная адаптация, то вам пригодится следующая информация:

События в JavaScript’е:

touchstart — аналогично mousedown
touchmove — mousemove
touchend — mouseup
touchcancel — аналогии нет

О том как с ними работать, можно подчерпнуть из статей iPhone Touch Events in JavaScript и Touching and Gesturing on the iPhone

Если же вернутся к CSS, то для того же iPhone подключение внешнего CSS файла будет выглядеть следующим образом:

<link rel="stylesheet" href="iphone.css" type='text/css' media='only screen and (max-device-width: 480px)' />

Или в самом CSS:

@media only screen and (max-device-width: 480px) {
  .sidebar {
    display: none;
  }
}

Подробнее читайте в статье iPhone Development: 12 Tips To Get You Started (перевод был тут)

Цикл статей

61 thoughts on “jQuery для начинающих. Часть 6. События”

deerua says:

2010-06-02 at 17:18
ивенты можно назначать и вызывать непосредственно ихним именем без “on”
```
$("#someid").click(function(){
	$(this).css({});
}).click();
```
Reply
1. deeua says:
  
  2010-06-02 at 17:20
  
  плохо читал статью :)
  
  Reply
Matskoff-Lion says:

2010-06-02 at 18:39
Разве триггеры это события возбуждаемые скриптом? Насколько мне известно, триггеры – обработчики этих самых событий. Такая терминология в СУБД, и здесь она тоже логику не нарушает. А такой код, мне кажется, следует рассматривать как ручной вызов этого самого обработчика:
```
$('.class').trigger('click.namespace');
```
Reply
1. Anton Shevchuk says:
  
  2010-06-02 at 20:52
  
  С событиями браузера еще понятно – но если брать кастомные события – то такая формулировка вполне подходит, хотя и самому она не очень нравится…
  
  Reply
Kein says:

2010-06-03 at 10:14

Подписался на ваш канал в google-reader. Статьи интересные, но вопрос, не могли бы вы их делать под катом, а то уж больно не читабельно когда видна вся статья целиком)

Reply
1. Anton Shevchuk says:
  
  2010-06-04 at 10:14
  
  Как-нить надо будет опрос среди читателей сделать, по результатам изменю настройки.
  
  Reply
yAnTar says:

2010-06-04 at 11:20

Мені на співбесіді задавали питання, чому live не підтримує подію focus.
Я не знав реалізації live і не відповів на питання. А live просто вішають на document і потім йде спливання події до потрібного нам елементу. А на документ focus не можна вішати.

Reply
vadim says:

2010-06-05 at 02:19
Как вовремя :)
У меня вопрос – почему обработка scroll события для iframe на Gecko движках обрабатывается, а на WebKit – не?
Задача – на странице 2 iframe, которые надо синхронно скролить:
```
$(document).ready(function(){
    $("#src-frame").contents().scroll(function() {
        $("#tgt-frame").contents().scrollTop($("#src-frame").contents().scrollTop());
    });
    $("#tgt-frame").contents().scroll(function() {
        $("#src-frame").contents().scrollTop($("#tgt-frame").contents().scrollTop());
    });
});
```
В Seamonkey и Firefox все отрабатывае нормально, а в Chrome, Safari и Opera – нет.
Reply
Никита Лебедев says:

2010-06-13 at 11:17

Спасибо, за всю серию спасибо

Reply
Pingback: IнTересные ссылки №6 (2010-07-09) | IнTересности
Head says:

2010-07-12 at 12:29

Антон, помогите разобраться с позиционированием

$(‘.papersize’).change(function () {
var papersize = $(this).val();
var id = $(this).attr(“id”);
if (papersize == ‘0’) {
$(‘div[id]#papertype’).attr(‘disabled’, true);

По селекту .papersize я либо неверно беру id его div’a либо неверно обращаюсь для вывода. Не силён в Jquery ни разу, всё методом тыка =)

Reply
1. arthur says:
  
  2010-08-02 at 15:45
```
$('div[' + id + ']#papertype')
```
  Вы просто переменную ставите в кавычки
  Reply
Anton Shevchuk says:

2010-07-12 at 16:39
1. Используйте кнопки для форматирования кода
2. Не совсем понятно что происходит в данном коде, но кое-что я бы исправил
```
$('#papertype').attr('disabled', disabled');
```
Reply
redbook says:

2010-08-31 at 12:30
Таке питання – чи можна емулювати натискання на лінк, а то у мене так не працює
```
<a id="a_my" target="_blank" href="http://example.com">example</a>
```
```
$('#a_my').trigger('click')
або
$('#a_my').click()
```
Не спрацьовує жоден з цих варіантів.
Reply
redbook says:

2010-08-31 at 12:33
Зробив через
```
window.open($('#a_my').attr('href'));
```
Reply
andriy says:

2010-09-02 at 12:58

Як зробити за допомогою jQuery форум чи обговорення на подобі цього?

Reply
ha$h says:

2010-09-16 at 16:59
Антон, спасибо Вам за ваши статьи, очень многому научился, благодаря им.
Если Вам не сложно, помогите плиз решить один вопрос.

Юзая плагин “jquery.form”, столкнулся с нуждой добавить событие afterUpdate в который нужно передать данные, полученные в аякс респонсе.
```
$(obj).ajaxForm({
   success: function (json){
     if(json.status == 'success') {
        $(obj).trigger("afterUpdate",json); &lt;----
   ......
});


$(obj).bind("afterUpdate", json, function(){
   ...
});
```
но вот при такой записи, консоль при загрузке страницы ругается на json (обозначил стрелкой), мол undef он.
Есть ли способы, как решить этот вопрос, кроме регистрации глобальной переменной и запихивания в нее результатов джейсона?

Вариант “кривого” решения:
```
var data = false;

$(obj).ajaxForm({
   success: function (json){
     if(json.status == 'success') {
        data = json;
        $(obj).trigger("afterUpdate");
   ......
});


$(obj).bind("afterUpdate", data, function(){
   ...
});
```
Заранее спасибо!
Reply
1. Anton Shevchuk says:
  
  2010-09-16 at 17:19
  Как-то так должно быть:
```
// триггер
$(obj).trigger("afterUpdate", [json]);

// обработчик
$(obj).bind("afterUpdate", function(event, json){
    /* ... */
});
```
  Reply
Владимир says:

2010-09-20 at 12:31
Спасибо за статьи! Регулярно к ним обращаюсь
Возник вопрос: Как вместо
```
$'.class').bind('click.namespace', function(){
    console.log('bang');
});
```
Написать что-то типа такого
```
function aaa(){
    console.log('bang');
}
$(document).ready(function(){
    $'.class').bind('click.namespace', aaa());
});
```
Reply

сам нашел решение

var aaa = function (){
    console.log('bang');
}
$(document).ready(function(){
    $'.class').bind('click.namespace', aaa);
});

Николай says:

2010-10-20 at 10:52
Здравствуйте.
Имеем Lightbox2, который вешается на странице
```
<a href="картинка.jpg" id="anons" rel="lightbox">анонс</a>
```
Как сделать, чтобы эта конструкция сработала сразу при загрузке страницы?
Пробовал:
```
jQuery(document).ready(function() {
    jQuery('#anons').click();
});
```
Не работает :(((
Уже несколько часов бьюсь.
Суть в том, чтобы вывести нужное сообщение-картинку при загрузке страницы с помощью Lightbox2.
Reply
1. Anton Shevchuk says:
  
  2010-10-20 at 14:20
  
  К сожалению, я не знаю каким образом организованы обработчики событий в prototype (именно этот фреймворк использует Lightbox2), в jQuery вешается лишь один обработчик который инициализирует все остальные которые найдет в $.cache[uid].
  
  Так же могу посоветовать не использовать так много фреймворков на одной странице, лучше воспользуйтесь каким-нить аналогом написанным на jQuery, тот же jQuery Tools – http://flowplayer.org/tools/demos/overlay/index.html
  
  Reply
Андрей says:

2010-10-21 at 16:02

Антон, добрый день.
почитал несколько статей, очень интересно и понятно написано.
Я только знакомплюсь с JQuery может сейчас задам глупый вопрос, но хотел спросить следующее:

каким образом движек JQuery получает управление. (Вопрос немного отрешенный :-))

Я сам программист, но под Web не писал раньше, только начал разбираться.
Я правильно понитмаю что любая функция написанная в секции сможет заработать если ее что-то запустило?
Просто простые скрипты получают управление, если на web форме нажали кнопку ссылку или еще что-то, сам по себе JQuery статичен, или в нем есть что-то на подобии прерывания (запущенный поток, который мониторит все события, движение мыши нажатие клавиатуры и т.д.). Либо все события могут выполняться только по инициативе конкретного объекта, например над каким-нибудь элементом проводишь курсором мыши, и тогда этот элемент инициирует запуск функции в JQuery ?

Reply
1. Anton Shevchuk says:
  
  2010-10-22 at 10:04
  
  Тут стоит забыть ненадолго о jQuery, и немного разобраться с самим javascript, пожалуй лучше привести ссылку на доку http://javascript.ru/tutorial/events/intro там достаточно подробно описано поведение событий
  
  Reply
Eldar says:

2010-10-29 at 12:03
Такой вопрос. Как сделать, если разные кнопки должны вызывать одну и ту же функцию?

Вот так, громоздко:
```
$("#knopka").click(function() {
    myFunc();
});
```
А так, не работает:
```
$("#knopka").click(myFunc());
```
Reply

function asd(){
    console.log('asd');
}
var ebd = function() {
    console.log('ebd');
}

$('#knopka').click(asd);
$('#knopka').click(ebd);

Eldar says:

2010-10-29 at 16:47

А как передать параметры?

Reply

a13ks3y says:

2010-12-12 at 00:50

Поддерживаемые события: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup, change, submit, focusin, focusout, mouseenter, mouseleave
Нет поддержки: blur, focus, change, submit

WTF?!!

Reply
Саша says:

2011-01-14 at 00:51
А из-за чего событие внутри delegate выполняется несколько раз? В данном случае три раза:
```
$("#modal", top.document).delegate("#cancel-button", "click", function(){
	$(this).after("<p>Another paragraph! delegate</p>");
});
```
Здесь div с id=”modal” в который методом ajax подгружается кнопка с id=”cancel-button” при нажатии на которую после нее (кнопки) выводится текст. Так вот он выводится три раза почему-то. В чем может быть дело? Не подскажите?
Reply
Андрей says:

2011-06-14 at 11:08

Антон, спасибо за замечательные уроки. Все очень здорово и доступно.
Помогите пожалуйста в следующем. Есть изображение, которое увеличивается в размерах при наведении, соответственно при уведении – уменьшается. Но если быстро поводить мышкой по изображению(раз 10 например) – то после этого, оно будет еще пять минут увеличиваться и уменьшатся, т.е. джиквери запомнило количество действий.
Как от этого избавиться? т.е. можно ли делать какую-то проверку на завершенность события, мол пока действие, привязанное на первое событие не выполнилось полностью, на следующие события не реагировать…
Думаю такая задача возникает достаточно часто. Надеюсь получить ответ. Спасибо.

Reply
1. Anton Shevchuk says:
  
  2011-06-14 at 12:08
  
  Посмотрите в сторону метода stop(), он принимает в качестве параметров два флага.
  
  Reply
vadim says:

2011-06-16 at 01:43

Поддерживаемые события: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup, change, submit, focusin, focusout, mouseenter, mouseleave

Нет поддержки: blur, focus, change, submit

Reply
psycho-coder says:

2011-08-03 at 12:04

Поддерживаемые события: click… ,change, …
Нет поддержки: blur, focus, change, submit

Пофиксите плз

Reply
Eldar says:

2012-05-12 at 23:44

Антон, я делаю скрипт для слайдшоу. Вопрос по событию “load”: можно ли показывать следующий слайд только после того как картинка полностью загрузится?

Reply
Pingback: jQuery — getting started « « Глеб Кушедов, Kushedow - Строим сайты, которыми хочется делиться Глеб Кушедов, Kushedow — Строим сайты, которыми
Amir says:

2012-08-05 at 18:00

После 3-х дней мучений, с вешанием событий на полученные ссылки Ajax-ом, наконец все ЗАРАБОТАЛО! Огромное Вам спасибо Автор!!!

Reply
ANDRY says:

2012-09-22 at 15:15

Подскажите пожалуйста, как сделать, что бы при нажатии на кнопку перезагружалась эта же страница?

Reply
Pingback: jQuery для начинающих. Часть 9. Пишем плагины анимации
Pingback: jQuery для начинающих. Часть 3. AJAX
Pingback: jQuery для начинающих. Часть 4. Селекторы
Алексей says:

2012-11-02 at 18:23

Приветствую!
Спасибо за хорошо изложенный материал, для начинающих самое оно)
Подскажите, почему скрипт:

$(‘a[href^=/]’).click(function(event){
$(‘#content’).load($(this).attr(‘href’));
return false;
});

работает только в том div где прописан. Если прописать скрипт в шапке – переходы по ссылкам осуществляются. Не хотелось бы вставлять его в каждый div. Страница:

$(‘a’).click(function(event){
$(‘#content’).load($(this).attr(‘href’));
event.preventDefault();
});

Test

Reply
1. Anton Shevchuk says:
  
  2012-11-03 at 14:00
  
  Я так понимаю, что проблема с тем, что обработчики вешаются до того как объявляются элементы, следовательно надо запихнуть обработчики в document ready
  
  Reply

Здравствуйте, а подскажите пожалуйста как вызвать событие клавиатуры забой.
те я проверяю маску ввода и как только пользователь отходит от нее я хочу стереть 1 символ $(“#my”).trigger( ‘keydown’, 8 );

  function ValidateFormat( obj, len1, len2, kCode ){
      if( kCode >= 37 && kCode <= 40 )
        return;
      var curpos = getCursor(obj);

    var str = '^-$|^\d{1,2}$';
    var ReGood = new RegExp( str, '' );

    while( !ReGood.test( obj.value ) && curpos ){
      obj.value = obj.value.substr(0, curpos - 1) + obj.value.substr(curpos, obj.value.length);
      здесь послать "забой"
а-ля  $("#my").trigger( 'keydown', 8 );
    }
  }

Sadus says:

2013-04-16 at 07:11

Подскажите пожалуйста, как мне обработать событие hover (на div) при том условие, что была зажата кнопка мыши (mousedown) и соответственно лишь при этом условии выполнить заданную функцию. И не выполнять ее если событие hover произошло без события mousedown

Reply
Maxim says:

2013-07-08 at 09:07

Здравствуйте, столкнулся с проблемой что один и тот же код обработчика события mousemove работает в chrome, но не работает в safari 6.0.5 mac OSX. Точнее работает, но событие срабатывает только при скролле страницы влево/вправо или вверх/вниз, причем если я скроллю влево/вправо то изменяется только event.pageX, а если вверх/вниз то изменяется только event.pageY. Если я просто вожу мышью над элементом, события mousemove не происходит. Самое странное что в chrome все хорошо. Искал какие есть баги в сафари связанные с mousemove, но не нашел.

Reply

Здравствуйте, помогите решить проблему. Столкнулся, не знаю что делать.
Есть плагин user_messages. Вот код метода:

update_message: function (options) {
            console.log('Сработал метод update_messages плагина user_messages');

            var settings = $.extend({
                id: false,
                status: 1
            }, options);

            var s = settings;

            if(s.id){
                var request = $.ajax({
                    url:'/cabinet/user_messages/update_user_message',
                    type:"GET",
                    cache: true,
                    dataType: "json",
                    data: {message_id: s.id, Status: s.status},
                    beforeSend: function(){},
                    success: function(data){
                        $.each(window.user_messages,function(key,val){
                            if(val.ID_message == data.ID_message){
                                val.Status = data.Status;
                            }
                        });
                        $(window).trigger("user_messages.update_message.success");
                        console.log('Сработал триггер user_messages.update_message_success');
                    },
                    error: function(){}
                });
            }
            return request;
        }

Вот вызов:

$(window).on('user_messages.update_message.success',function(){
                    console.log(window.user_messages);
                    var unread_messages = {};
                    $.each(window.user_messages,function(key,val){
                        if(val.Status == 0){
                            unread_messages[key] = val;
                        }
                    });
                    $.each(unread_messages,function(key,val){
                        if(!is_shown_message(val.ID_message,shown_ids)){
                            jQuery.noticeAdd({
                                text: val.message_template,
                                stay: true,
                                type: 'notice-simple'
                            });
                            return false;
                        };
                    });

                    function is_shown_message(message_id,shown_ids){
                        var result = false;
                        $.each(shown_ids,function(key,val){
                            if(message_id == val){
                                result = true;
                                return false;
                            }
                        });
                        return result;
                    }
                });

Не могу разобраться почему триггер срабатывает 2 раза. Помогите. 3ий день голову ломаю.

Владимр says:

2013-10-11 at 10:52

Почему вообще триггер может срабатывать 2 раза?
Суть работы плагина такая, при загрузке страницы отправляется ajax запрос. Ответ записывается в window.user_messages. Далее три первых объекта из window.user_messages выводятся на экран. Далее при клике на один из объектов посылается ajax запрос на обновление статуса данного объекта. При успешном завершении запроса срабатывает триггер user_messages.update_message.success. И обновляется статус обновлённого объекта в window.user_messages.
Так вот: при первом клике всё срабатывает нормально, а вот при втором и последующих, триггер срабатывает 2 раза.

Reply

Andrey says:

2013-10-25 at 17:31

Можно ли при нажатии на кнопку в модальном окне изменить значение в в родительском окне???

Reply
1. Anton Shevchuk says:
  
  2013-10-27 at 16:46
  
  Не совсем понял что вы называете модальным окном, возможно стоит посмотреть в сторону window.parent
  
  Reply
Влад says:

2013-10-26 at 15:20

Добрый день.
Антон, только знакомлюсь с jQuery, подскажите, пожалуйста, как бы Вы сделали.
Например, есть таблица (стоблец А и строки 1-3):
A
1 aa
2 ba
3 ca
Как в jQuery сделать поиск по значению (aa, ba, ca) с добавлением какого либо значения в конец (aa1, ba2, ca3)? Т.е. есть входной массив (аа->1, ba->2, ca->3) и надо добавить к значениям в колонке соответствующее значение из массива.

Я ищу через фильтр контекста и добавляю 1 contains(‘aa’).append(‘1’), но как перебрать все значения из массива в jQuery? Только через цикл?

Reply
Марат says:

2014-02-27 at 20:40

Антон, доброго времени суток. В jQuery совсем новичок, делаю первые шаги, поэтому вопрос может показаться глупым, но для меня сейчас это непреодолимая проблема:
нужно повесить на элементы .process_files обработчик клика, чтобы он чего-то делал. Хотя бы выводил “Hello!”
Я делаю так:

$(‘.process_files’).click(function(){
alert(“Hello!”);
})

Судя по тому, что ничего не работает, я делаю что-то неправильно. Вы могли бы подсказать, что именно? Был бы очень благодарен.

Reply

а как можно съэмулировать вызов функции $(document).ready ?

//для примера
window.onload = function(){}
//эмулирую так
var load_event = document.createEvent(&quot;HTMLEvents&quot;);
load_event.initEvent(&quot;load&quot;, false, false);
window.document.dispatchEvent(load_event);

baha says:

2015-06-26 at 07:08
Всем привет! Можно ли в события click функция предать входной параметр var переменный данные. Например
```
var SendAjax = $(‘#SendAjax’);

SendAjax .click(function(data, data1)
{
 alert(data+' '+data1);
})

SendAjax.click('1','2');
```
Reply
1. Anton Shevchuk says:
  
  2015-07-06 at 17:50
  Если вот этот код:
```
SendAjax.click('1','2');
```
  Должен вызвать обработчик с данными параметрами – то нет, так работать не будет, можно так:
```
SendAjax.click({'some':'data'}, function(event) { alert(event.data); });
```
  Или так:
```
SendAjax.click(function(event, data, data1) { alert(data+' '+data1); });
SendAjax.trigger('click', ['1','2']);
```
  Reply

Есть кнопки + и – и есть input в котором отображает кол-во заказов, всё вроде хорошо, но при клике + или – у всех позиций в других li меняет значение, вот код, буду благодарен за помощь:

			var minus = $('.minus'),
				plus = $('.plus'),
				valIn = 1;

					function changeInput(){
					$('.quantity .prod-quantity').val(valIn);
					}

				minus.click(function(event){
					event.preventDefault();
					valIn--;
					changeInput();

					if( valIn &lt; 1 ){
						valIn = 1;
					}

				});

				plus.click(function(event){
					event.preventDefault();
					valIn++;
					changeInput();
				});

Здравствуйте
Подскажите чайнику
Есть функция срабатывающая на нажатие любой кнопки хочу передать в объект rf id нажатой кнопки, ‘ViewName’: this.id – получаю null

$('button').click(function () {
	var rf =
		{
			'DateFrom': $("#DateFrom").val(),
			'ProductId': $("#ProductId").val(),
			'ViewName': this.id
		};
	
	$.ajax({
		type: "POST",
		url: "/Home/MainMenu",
		data: JSON.stringify(rf),
		contentType: "application/json; charset=utf-8",
		dataType: "json",
		success: successFunc,
		error: errorFunc
	});
});

Anton Shevchuk says:

2016-10-27 at 17:44
А так:
```
$(this).attr('id');
```
Reply

Евгений says:

2017-02-06 at 18:15
Здравствуйте
я сейчас на стадии изучения и нужна помощь
проблема в следующем, реализовал “живой поиск”, но при быстром наборе у меня возвращает повторный список продуктов
```
$('#form-query').on("input", function() {
		var inp = $(this).val();
		$('#search_result').html('');
		if(inp.length >= 2 && inp.length !== null){
                  $.ajax({
                  type: 'post',
                  url: URL,
                  data: {'inp': inp},
                  response: 'text',
                  success: function(data){ ..... }
                });
             }
        });
```
полагаю что нужно сделать задержку при отправке данных на метод, пытался исправить с помощью setTimeout(), но это не помогло
Reply
Pingback: Web мох находки — Мои поезности@barolina
Pingback: web находки | Полезности в IT @barolina
Pingback: jQuery для начинающих