jQuery의 .click-사용자 함수에 매개 변수 전달


283

jQuery의 .click을 사용하여 매개 변수가있는 함수를 호출하려고하는데 작동하지 않습니다.

이것이 내가 작동하는 방식입니다.

$('.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

철저히하기 위해 jQuery 클릭 이벤트 핸들러 버전 1.4.3에 도입 된 기능의 일부인 다른 솔루션을 발견했습니다 .

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을 사용하고 있다고 생각합니다. 이것이 가장 좋은 방법입니다.
Paul Hoffer

1
서버 측에서 동적으로 객체를 만들고 click 이벤트를 다음과 함께 바인딩하고 있습니다. r.OnClientClick = "imageClicked ({param1 : '"+ obj.Command + "'}); return false"; 그런 다음 클라이언트 측에 다음이 있습니다. function imageClicked (event) {if (event.param1 == "GOTO PREVIOUS") {... event.data.param1을 사용하면 정의되지 않았다고 말합니다. 이제 여기에 입력했는데 차이점을 볼 수 있습니다.
가족

1
@Family-Haaha 문제 없음, 댓글을 통해 도움을 주셔서 감사합니다.)
Chris Kempen

5
@totymedli-항상 같은 구조의 객체를 전달하여 다른 곳에서 호출 할 수 있다고 생각합니다 var param_obj = {data : {param1: "Hello", param2: "World"}}; cool_function(param_obj);.
Chris Kempen

1
이것은 HTML5 데이터 속성을 사용하는 것보다 훨씬 낫습니다. 감사합니다! (그리고 콜백에서도 'this'를 사용하는 것에 대해 불평하는 JSHint를 해결합니다!)
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
}

당신이 방금 말할 때, 그것은 단지 의미 하는가? 둘째, 일반적으로 익명 함수 내에서와 같이 add_event 함수 내에서 $ (this)를 사용할 수 있다는 의미입니까?
Paul Hoffer

2
@phoffer-예, "단지"는 매개 변수가없고 함수 이름 , 함수에 대한 참조이며 click처리기 에 할당하려는 함수를 실행 한 결과가 아닙니다 . 위의 익명 방법과 .bind()예제 에서을 사용할 수 있습니다 . 예상 한대로 클릭 this.loadtoscore것을 나타냅니다. 마지막 예에서, 내부 add_event(event)같은 것은 사실, 사용하는 것입니다 this또는 $(this)그것을 당신이 원하는 수 있습니다.
Nick Craver

1
@phoffer : 요소를 사용하려면 요소를 명시 적으로 전달해야합니다 (예 : function(){ add_event('shot', $(this));}및) function add_event(event, element){...}. element여기서 jQuery 요소가됩니다 ( bind()Nick이 언급 한 것처럼 작동 함 ).
Felix Kling

@Felix-그는 $(this)함수 내부 에서도 사용할 수 있습니다. 예 : jsfiddle.net/tSu5t
Nick Craver

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)
113716

27

.on ()을 사용하여 성공했습니다.

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

그런 다음 add_event함수 내에서 다음 과 같이 'shot'에 액세스 할 수 있습니다.

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"요소에서 Object를 가져옵니다.

 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이벤트를에 전달하고 javascript function sendData()변수를 초기화 한 다음 jquery 이벤트 핸들러 메소드로 가져 오는 것입니다.

이것은 처음 sendData(valueid)에 호출되어 값을 초기화하기 때문에 가능합니다. 그런 다음 jquery 이벤트가 실행 된 후 해당 값을 사용하십시오.

이것은 간단한 솔루션이며 For Detail 솔루션은 여기 로 이동하십시오 .


여기에는 동적 매개 변수를 전달하는 방법이 없으며 하드 코딩 된 값만 표시됩니다.
user1451111

이렇게하면 valueId 만 전달하고 요소와 이벤트 객체를 잃게됩니다.
Zoltán Süle
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.