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 (первый параметр — имя события, второй — обработчик).

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

  1. все внутренние ссылки на страницы должны подгружать контент AJAXом в элемент с id=content
  2. правило №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 (перевод был тут)

Цикл статей

  1. jQuery для начинающих
  2. jQuery для начинающих. Часть 2. JavaScript Меню
  3. jQuery для начинающих. Часть 3. AJAX
  4. jQuery для начинающих. Часть 4. Селекторы
  5. jQuery для начинающих. Часть 5. Эффекты
  6. jQuery для начинающих. Часть 6. События
  7. jQuery для начинающих. Часть 7. Пишем плагины
  8. jQuery для начинающих. Часть 8. Расширяем фильтры
  9. jQuery для начинающих. Часть 9. Пишем плагины анимации

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

  1. ивенты можно назначать и вызывать непосредственно ихним именем без “on”

    $("#someid").click(function(){
    	$(this).css({});
    }).click();
  2. Разве триггеры это события возбуждаемые скриптом? Насколько мне известно, триггеры – обработчики этих самых событий. Такая терминология в СУБД, и здесь она тоже логику не нарушает. А такой код, мне кажется, следует рассматривать как ручной вызов этого самого обработчика:

    $('.class').trigger('click.namespace');
    
    1. С событиями браузера еще понятно – но если брать кастомные события – то такая формулировка вполне подходит, хотя и самому она не очень нравится…

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

    1. Как-нить надо будет опрос среди читателей сделать, по результатам изменю настройки.

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

  5. Как вовремя :)
    У меня вопрос – почему обработка 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 – нет.

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

    $(‘.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 ни разу, всё методом тыка =)

    1. $('div[' + id + ']#papertype')

      Вы просто переменную ставите в кавычки

  7. 1. Используйте кнопки для форматирования кода
    2. Не совсем понятно что происходит в данном коде, но кое-что я бы исправил

    $('#papertype').attr('disabled', disabled');
    
  8. Таке питання – чи можна емулювати натискання на лінк, а то у мене так не працює

    <a id="a_my" target="_blank" href="http://example.com">example</a>
    $('#a_my').trigger('click')
    або
    $('#a_my').click()
    

    Не спрацьовує жоден з цих варіантів.

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

  10. Антон, спасибо Вам за ваши статьи, очень многому научился, благодаря им.
    Если Вам не сложно, помогите плиз решить один вопрос.

    Юзая плагин “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(){
       ...
    });
    

    Заранее спасибо!

    1. Как-то так должно быть:

      // триггер
      $(obj).trigger("afterUpdate", [json]);
      
      // обработчик
      $(obj).bind("afterUpdate", function(event, json){
          /* ... */
      });
      
      
  11. Спасибо за статьи! Регулярно к ним обращаюсь
    Возник вопрос: Как вместо

    $'.class').bind('click.namespace', function(){
        console.log('bang');
    });
    

    Написать что-то типа такого

    function aaa(){
        console.log('bang');
    }
    $(document).ready(function(){
        $'.class').bind('click.namespace', aaa());
    });
    
  12. сам нашел решение

    var aaa = function (){
        console.log('bang');
    }
    $(document).ready(function(){
        $'.class').bind('click.namespace', aaa);
    });
    
  13. Здравствуйте.
    Имеем Lightbox2, который вешается на странице

    <a href="картинка.jpg" id="anons" rel="lightbox">анонс</a>
    

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

    jQuery(document).ready(function() {
        jQuery('#anons').click();
    });
    

    Не работает :(((
    Уже несколько часов бьюсь.
    Суть в том, чтобы вывести нужное сообщение-картинку при загрузке страницы с помощью Lightbox2.

    1. К сожалению, я не знаю каким образом организованы обработчики событий в prototype (именно этот фреймворк использует Lightbox2), в jQuery вешается лишь один обработчик который инициализирует все остальные которые найдет в $.cache[uid].

      Так же могу посоветовать не использовать так много фреймворков на одной странице, лучше воспользуйтесь каким-нить аналогом написанным на jQuery, тот же jQuery Tools – http://flowplayer.org/tools/demos/overlay/index.html

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

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

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

  15. Такой вопрос. Как сделать, если разные кнопки должны вызывать одну и ту же функцию?

    Вот так, громоздко:

    $("#knopka").click(function() {
        myFunc();
    });

    А так, не работает:

    $("#knopka").click(myFunc());
  16. Поддерживаемые события: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup, change, submit, focusin, focusout, mouseenter, mouseleave
    Нет поддержки: blur, focus, change, submit

    WTF?!!

  17. А из-за чего событие внутри delegate выполняется несколько раз? В данном случае три раза:

    $("#modal", top.document).delegate("#cancel-button", "click", function(){
    	$(this).after("<p>Another paragraph! delegate</p>");
    });
    

    Здесь div с id=”modal” в который методом ajax подгружается кнопка с id=”cancel-button” при нажатии на которую после нее (кнопки) выводится текст. Так вот он выводится три раза почему-то. В чем может быть дело? Не подскажите?

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

    1. Посмотрите в сторону метода stop(), он принимает в качестве параметров два флага.

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

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

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

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

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

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

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

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

    $(‘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

    1. Я так понимаю, что проблема с тем, что обработчики вешаются до того как объявляются элементы, следовательно надо запихнуть обработчики в document ready

  25. Здравствуйте, а подскажите пожалуйста как вызвать событие клавиатуры забой.
    те я проверяю маску ввода и как только пользователь отходит от нее я хочу стереть 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 );
        }
      }
    
  26. Подскажите пожалуйста, как мне обработать событие hover (на div) при том условие, что была зажата кнопка мыши (mousedown) и соответственно лишь при этом условии выполнить заданную функцию. И не выполнять ее если событие hover произошло без события mousedown

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

  28. Здравствуйте, помогите решить проблему. Столкнулся, не знаю что делать.
    Есть плагин 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ий день голову ломаю.

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

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

    1. Не совсем понял что вы называете модальным окном, возможно стоит посмотреть в сторону window.parent

  30. Добрый день.
    Антон, только знакомлюсь с 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? Только через цикл?

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

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

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

  32. а как можно съэмулировать вызов функции $(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);
  33. Всем привет! Можно ли в события click функция предать входной параметр var переменный данные. Например

    var SendAjax = $(‘#SendAjax’);
    
    SendAjax .click(function(data, data1)
    {
     alert(data+' '+data1);
    })
    
    SendAjax.click('1','2');
    
    1. Если вот этот код:

      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']);
      
  34. Есть кнопки + и – и есть 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();
    				});
    
  35. Здравствуйте
    Подскажите чайнику
    Есть функция срабатывающая на нажатие любой кнопки хочу передать в объект 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
    	});
    });
    
  36. Здравствуйте
    я сейчас на стадии изучения и нужна помощь
    проблема в следующем, реализовал “живой поиск”, но при быстром наборе у меня возвращает повторный список продуктов

    $('#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(), но это не помогло

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.