Связывание существующей функции JavaScript в jQuery

Используя jQuery, я хочу привязать существующую функцию к кнопке. Я просмотрел документацию и нашел метод bind, но примеры на сайте jQuery связывают вновь созданные функции, где я хочу связать уже определенную функцию, например:

function fHardCodedFunction(){
   //Do stuff
}

function fBindFunctionToElement(){
   $("#MyButton").bind("click", fHardCodedFunction());
}

Это возможно? Или я иду об этом неправильно?


javascript jquery event-handling
person Jack Mills    schedule 05.09.2009    source источник
comment
Вот соответствующий раздел документации jQuery API: Множественный селектор   -  person informatik01    schedule 17.01.2018

Ответы (4)


arrow_upward
37
arrow_downward

Обычный fHardCodedFunction уже относится к функции, а суффикс () просто вызовет ее. Поэтому просто передайте функцию вместо ее вызова и тем самым просто передайте возвращаемое значение:

function fBindFunctionToElement(){
   $("#MyButton").bind("click", fHardCodedFunction);
}
person Gumbo    schedule 05.09.2009
comment
@Jack Mills: Тогда вам нужно будет использовать (анонимную) функцию-оболочку, например function() { return fHardCodedFunction("foo","bar"); }, которую вы передаете в качестве функции обратного вызова в bind. - person Gumbo; 05.09.2009
comment
Это почти то, что я пытаюсь сделать (вместо этого я использую .click(), но, насколько я могу судить, это то же самое). Однако моя связанная функция не работает. Имеет ли связанная функция доступ к тем же переменным, что и функция click()? Или, может быть, при использовании синтаксиса $("#mydiv").click(function(){ $("#mydiv").hide();} в функцию передаются скрытые переменные? - person John C; 25.05.2012
comment
Если вы хотите передать параметр, вы можете вызвать внешнюю функцию внутри вашей анонимной функции и передать параметры таким образом. - person Jack Of Blades; 23.04.2018

arrow_upward
4
arrow_downward

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

function fHardCodedFunction(someValue) {
  alert(this.id + " - " + someValue);
}


function fBindFunctionToElement() {
  var someValue = "whatever";
  $("#MyButton").bind("click", 
       function() {
         fHardCodedFunction.apply(this, [someValue]);
       }
  );
}


$(document).ready
(
  function() {
    fBindFunctionToElement();
  }
);

Я использую команду apply здесь, потому что в функции fHardCodedFunction я хочу, чтобы свойство this ссылалось на элемент MyButton. Также обратите внимание, что apply ожидает массив для второго параметра, поэтому я заключил someValue в скобки.

Вам не обязательно делать это таким образом, и вы можете вообще забыть об этом свойстве this, если хотите.

person David Andres    schedule 05.09.2009

arrow_upward
2
arrow_downward

Да, вы можете связать методы, которые написаны где-то еще, но вы должны игнорировать круглые скобки:

function fHardCodedFunction(){
   //Do stuff
}

function fBindFunctionToElement(){
   $("#MyButton").bind("click", fHardCodedFunction);
}
person Canavar    schedule 05.09.2009

arrow_upward
0
arrow_downward

Поскольку этот ответ помечен тегом обработка событий, я подозреваю, что было бы полезно поговорить и о событиях. Ваша непосредственная проблема, как утверждают другие, состоит в том, чтобы просто использовать определенную функцию function, а не вызывать function(). Скобки указывают на вызов функции, в то время как вы пытаетесь указать функцию для использования.

Итак, как вы обрабатываете событие? Вам нужно только определить его как первый аргумент вашей функции...

function fHardCodedFunction(event){
    console.log(event);
}

function fBindFunctionToElement(){
    $("#MyButton").bind("click", fHardCodedFunction);
}

В документации api.jquery.com для bind() это также указано. . Я также собрал очень маленькую рабочую демонстрацию. , чтобы продемонстрировать обработку событий.

HTML...

<input type="text" id="text">
<div id="main">Results appear here.</div>

JavaScript...

function clickFunction(e) { return $('#main').html(e.which); }
$('#text').bind('keypress', clickFunction);
person HoldOffHunger    schedule 16.06.2020