Можно ли привязать две отдельные функции к одному и тому же событию?

Question

По сути, я хотел бы связать функцию A со всеми входами. Примерно так:

$('input').bind('change', function() { bla bla bla });

А потом я хотел бы связать что-то другое, кроме того, как это:

$('#inputName').bind('change', function() { do additional processing..});

Это возможно? Это работает? Я пропускаю синтаксис? Разве это нормально на самом деле (имеется в виду, что у меня есть ошибка в другом месте, из-за которой один из них не связывается)?

Answer 1

Короткий ответ на ваш вопрос - ДА.

Если вы хотите связать дополнительную функциональность с событием изменения #inputName, ваш пример кода должен работать.

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

$('#inputName').unbind('change');

но будьте осторожны ... без этого я не уверен ни в одном из побочных эффектов.

Answer 2

Почему бы вам не создать функцию, которая вызывает их обоих, а затем связать эту новую функцию с событием?

Answer 3

Работает нормально, чтобы связать оба. Немного интересным становится ситуация, когда вы пытаетесь предотвратить поведение по умолчанию, возвращая false. Связанные функции не могут помешать друг другу работать таким образом, но они могут помешать запуску обработчиков событий родительских элементов.

Answer 4

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

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

Answer 5

В вашем коде один ввод, а другой inputName, это опечатка?

Обыск, есть аналогичный вопрос здесь.

$(document).ready(function() {
  $("input").change(function() {
    console.log("function1");
  });

  $("input").change(function() {
    console.log("function2");
  });
});