Как передать аргументы обработчикам событий в jQuery?

С кодом jQuery, например:

$("#myid").click(myfunction);

function myfunction(arg1, arg2) {/* something */}

Как передать аргументы myfunction при использовании jQuery?

Ответ 1

Самый простой способ - сделать это так (если вы не хотите, чтобы какая-либо информация о событии передавалась функции)...

$("#myid").click(function() {
    myfunction(arg1, arg2);
});

jsFiddle.

Это создаст анонимную функцию, которая вызывается при срабатывании события click. Это, в свою очередь, вызовет myfunction() с аргументами, которые вы предоставляете.

Если вы хотите сохранить ThisBinding (значение this при вызове функции, установите для элемента, который был вызван событие), затем вызовите функцию с помощью call().

$("#myid").click(function() {
    myfunction.call(this, arg1, arg2);
});

jsFiddle.

Вы не можете передать ссылку напрямую в том, как указывается ваш пример, или его единственным аргументом будет jQuery event object.

Если вы хотите передать ссылку, вы должны использовать jQuery proxy() function (которая представляет собой кросс-браузерную оболочку для Function.prototype.bind()). Это позволяет передавать аргументы, которые связаны перед аргументом event.

$("#myid").click($.proxy(myfunction, null, arg1, arg2));   

jsFiddle.

В этом примере myfunction() будет выполняться с его ThisBinding intact (null не является объектом, поэтому используется нормальное значение this элемента, вызвавшего событие), вместе с аргументами (по порядку) arg1, arg2 и, наконец, объект jQuery event, который вы можете игнорировать, если он не требуется (даже не называйте его в аргументах функции).

Вы также можете использовать объект jQuery event data для передачи данных, но для этого потребуется изменить myfunction() для доступа это через event.data.arg1 (которые не являются аргументами функций, например, вашими вопросами), или, по крайней мере, вводят ручную функцию прокси, такую ​​как предыдущий пример или сгенерированный, используя последний пример.

Ответ 2

$("#myid").on('click', {arg1: 'hello', arg2: 'bye'}, myfunction);

function myfunction(e) {

    var arg1 = e.data.arg1;
    var arg2 = e.data.arg2;

    alert(arg1);
    alert(arg2);

}

//call method directly:
myfunction({
    arg1: 'hello agian', 
    arg2: 'bye again'
});

Также позволяет связывать и развязывать специальные обработчики событий с помощью методов включения и выключения.

Пример:

$("#myid").off('click', myfunction);

Это отменит обработчик myfunction от #myid

Ответ 3

в то время как вы обязательно должны использовать ответ Alex, прототип библиотеки "bind" метод был стандартизован в Ecmascript 5 и вскоре будет реализован в браузерах изначально. Он работает следующим образом:

jQuery("#myid").click(myfunction.bind(this, arg1, arg2));

Ответ 4

Старый поток, но для поисковых целей; попробуйте:

$(selector).on('mouseover',...);

... и проверьте параметр "data": http://api.jquery.com/on/

например:.

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {name: "Karl"}, greet );
$( "button" ).on( "click", {name: "Addy"}, greet );

Ответ 5

Простой:

$(element).on("click", ["Jesikka"],  myHandler);

function myHandler(event){
   alert(event.data);     //passed in "event.data"
}