namespace - jquery on submit




jQuery несколько событий для запуска одной и той же функции (7)

Есть ли способ, чтобы keyup , keypress , blur и change событий вызывали одну и ту же функцию в одной строке или я должен выполнять их отдельно?

Проблема заключается в том, что мне нужно проверить некоторые данные с помощью поиска db и хотелось бы удостовериться, что валидация не пропущена ни в каком случае, будь она набрана или вставлена ​​в поле.


Вот как я это делаю.

$("input[name='title']").on({
    "change keyup": function(e) {
        var slug = $(this).val().split(" ").join("-").toLowerCase();
        $("input[name='slug']").val(slug);
    },
});

Вы можете использовать метод bind для присоединения функции к нескольким событиям. Просто передайте имена событий и функцию обработчика, как в этом коде:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

Другой вариант - использовать поддержку цепочки jquery api.


Вы можете определить функцию, которую вы хотите использовать повторно:

var foo = function() {...}

И позже вы можете установить множество прослушивателей событий, которые вы хотите на своем объекте, чтобы включить эту функцию, используя on («событие»), оставляя промежуток между ними, как показано ниже:

$('#selector').on('keyup keypress blur change paste cut', foo);

Если вы присоединяете один и тот же обработчик событий к нескольким событиям, вы часто сталкиваетесь с проблемой одновременного запуска нескольких из них (например, нажатие на кнопку после редактирования, нажатие клавиши, изменение и размытие могут срабатывать).

Похоже на то, что вы действительно хотите, это что-то вроде этого:

$('#ValidatedInput').keydown(function(evt) {
  // If enter is pressed
  if (evt.keyCode === 13) {
    evt.preventDefault();

    // If changes have been made to the input's value, 
    //  blur() will result in a change event being fired.
    this.blur();
  }
});

$('#ValidatedInput').change(function(evt) {
  var valueToValidate = this.value;

  // Your validation callback/logic here.
});

Ответ Tatu - это то, как я буду интуитивно делать это, но у меня возникли некоторые проблемы в Internet Explorer с таким способом вложения / привязки событий, даже если это делается с помощью .on() .

Я не смог точно определить, с какими версиями jQuery это проблема. Но иногда я вижу проблему в следующих версиях:

  • 2.0.2
  • 1.10.1
  • 1.6.4
  • Мобильный 1.3.0b1
  • Мобильный 1.4.2
  • Мобильный 1.2.0

Мое обходное решение заключалось в том, чтобы сначала определить функцию,

function myFunction() {
    ...
}

а затем обрабатывать события индивидуально

// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);

Это не самое красивое решение, но оно работает для меня, и я подумал, что я поместил его там, чтобы помочь другим, которые могут наткнуться на этот вопрос


Я искал способ получить тип события, когда jQuery прослушивает сразу несколько событий, и Google поместил меня сюда.

Итак, для тех, кого интересует, event.type - мой ответ:

$('#element').on('keyup keypress blur change', function(event) {
    alert(event.type); // keyup OR keypress OR blur OR change
});

Дополнительная информация в документе jQuery .


$("element").on("event1 event2 event..n", function() {
   //execution
});

Этот учебник посвящен обработке нескольких событий.





javascript-events