JQuery's .click - передать параметры пользовательской функции


283

Я пытаюсь вызвать функцию с параметрами, используя jcuery'sclick, но не могу заставить ее работать.

Вот как я хочу, чтобы это работало:

$('.leadtoscore').click(add_event('shot'));

какие звонки

function add_event(event) {
    blah blah blah }

Это работает, если я не использую параметры, как это:

$('.leadtoscore').click(add_event);
function add_event() {
    blah blah blah }

Но мне нужно иметь возможность передать параметр в мою add_eventфункцию.

Как я могу сделать эту конкретную вещь?

Я знаю, что могу использовать .click(function() { blah }, но я вызываю add_eventфункцию из нескольких мест и хочу сделать это таким образом.


это взято из patricksответа, который я считаю отличным решением: jsfiddle.net/naRRk/1
jAndy

Ответы:


514

Для тщательности я наткнулся на другое решение, которое было частью функциональности, представленной в версии 1.4.3 обработчика событий нажатия jQuery .

Он позволяет передавать карту данных объекту события, который автоматически возвращается в функцию-обработчик события jQuery в качестве первого параметра. Карта данных будет передана .click()функции в качестве первого параметра, за которой следует функция обработчика событий.

Вот некоторый код, чтобы проиллюстрировать, что я имею в виду:

// say your selector and click handler looks something like this...
$("some selector").click({param1: "Hello", param2: "World"}, cool_function);

// in your function, just grab the event object and go crazy...
function cool_function(event){
    alert(event.data.param1);
    alert(event.data.param2);
}

Я знаю, что уже поздно в игре на этот вопрос, но предыдущие ответы привели меня к этому решению, так что я надеюсь, что это поможет кому-нибудь когда-нибудь!


11
Это именно то, что я хотел (тогда). Я не работал над этим проектом с тех пор, но я думаю, что я использовал 1.4.0. Это определенно лучший доступный способ.
Пол Хоффер

1
Я динамически создаю объект на стороне сервера и привязываю событие click с помощью: r.OnClientClick = "imageClicked ({param1: '" + obj.Command + "'}); return false"; Затем на стороне клиента у меня есть: function imageClicked (event) {if (event.param1 == "GOTO PREVIOUS") {... Если я использую event.data.param1, он говорит, что он не определен. Теперь я напечатал это здесь, я вижу разницу, да!
Семья

1
@Family - Ха-ха, нет проблем, приятно помогать, даже через комментарии;)
Крис Кемпен

5
@totymedli - Я думаю , вы всегда могли бы назвать это где - нибудь еще, передавая объект из тех же структур: var param_obj = {data : {param1: "Hello", param2: "World"}}; cool_function(param_obj);?
Крис Кемпен

1
Это намного лучше, чем использовать атрибуты данных HTML5, спасибо! (И решает, что JSHint также будет жаловаться на использование «this» в обратном вызове!)
Matthew Herbst

77

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

$('.leadtoscore').click(function() {
  add_event('shot')
});

Вы можете вызвать его, как в примере, просто имя функции без параметров, например:

$('.leadtoscore').click(add_event);

Но add_eventметод не получит 'shot'его как параметр, а скорее то, что clickпередается в его обратный вызов, которым является сам eventобъект ... так что он не применим в этом случае , но работает для многих других. Если вам нужно передать параметры, использовать анонимную функцию ... или, есть один другой вариант, использовать .bind()и передавать данные, как это:

$('.leadtoscore').bind('click', { param: 'shot' }, add_event);

И получить доступ к нему add_event, как это:

function add_event(event) {
  //event.data.param == "shot", use as needed
}

Когда вы говорите только, это значит только? Во-вторых, означает ли это, что я смогу использовать $ (this) внутри своей функции add_event, как обычно в анонимной функции?
Пол Хоффер

2
@phoffer - Да, «просто» означает отсутствие параметров, только имя функции, это ссылка на функцию, а не результат запуска функции, которую вы хотите назначить clickобработчику. В .bind()приведенном выше анонимном методе и примерах, которые вы можете использовать this, он будет ссылаться на тот, на который .loadtoscoreвы нажали (как и следовало ожидать). В последнем примере внутри add_event(event)то же самое верно, используйте thisили, $(this)и это будет то, что вы хотите.
Ник Крейвер

1
@phoffer: Вы должны были бы передать элемент явно, чтобы использовать его, например: function(){ add_event('shot', $(this));}и function add_event(event, element){...}. elementздесь будет элемент jQuery (он работает, bind()хотя, как упоминал Ник).
Феликс Клинг

@Felix - он также может использовать $(this)внутри функции, например: jsfiddle.net/tSu5t
Ник

35

Если вы называете это так, как вы это сделали ...

$('.leadtoscore').click(add_event('shot'));

... вам нужно будет add_event()вернуть функцию, как ...

function add_event(param) {
    return function() {
                // your code that does something with param
                alert( param );
           };
}

Функция возвращается и используется в качестве аргумента для .click().


@jAndy - Спасибо за публикацию примера, включающего eventпараметр. Я должен был включить это. : o)
user113716

27

Я успешно использовал .on () примерно так:

$('.leadtoscore').on('click', {event_type: 'shot'}, add_event);

Затем внутри add_eventфункции вы получаете доступ к «выстрелу» следующим образом:

event.data.event_type

См. Документацию .on () для получения дополнительной информации, где они предоставляют следующий пример:

function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

11

Да, это старый пост. Независимо от этого, кто-то может найти это полезным. Вот еще один способ отправки параметров в обработчики событий.

//click handler
function add_event(event, paramA, paramB)
{
    //do something with your parameters
    alert(paramA ? 'paramA:' + paramA : '' + paramB ? '  paramB:' + paramB : '');
}

//bind handler to click event
$('.leadtoscore').click(add_event);
...
//once you've processed some data and know your parameters, trigger a click event.
//In this case, we will send 'myfirst' and 'mysecond' as parameters
$('.leadtoscore').trigger('click', {'myfirst', 'mysecond'});

//or use variables
var a = 'first',
    b = 'second';

$('.leadtoscore').trigger('click', {a, b});
$('.leadtoscore').trigger('click', {a});

6
      $imgReload.data('self', $self);
            $imgReload.click(function (e) {
                var $p = $(this).data('self');
                $p._reloadTable();
            });

Установите объект javaScript для элемента onclick:

 $imgReload.data('self', $self);

получить объект из элемента "this":

 var $p = $(this).data('self');

Потрясающие! К сожалению, это единственное, что работает, когда я пытаюсь использовать переменные jquery! понятия не имею почему. : |
Cregox

3

Я получаю простое решение:

 <button id="btn1" onclick="sendData(20)">ClickMe</button>

<script>
   var id; // global variable
   function sendData(valueId){
     id = valueId;
   }
   $("#btn1").click(function(){
        alert(id);
     });
</script>

Я имею в виду, что передаю onclickсобытие value в javascript function sendData(), инициализируем переменную и принимаю его методом обработчика событий jquery.

Это возможно, поскольку сначала вызывается sendData(valueid)и инициализируется значение. Затем после события jquery get выполняется и использует это значение.

Это прямолинейное решение, а для получения подробной информации перейдите по ссылке .


Я не вижу способа передачи динамических параметров здесь, только жестко закодированные значения.
user1451111

таким образом, вы передаете только valueId и теряете элемент и объекты события.
Золтан Суле
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.