2011-04-13 2 views
0

여러 이벤트에 동일한 작업을 추가하는 방법을 찾고 있습니다.jQuery - 여러 이벤트에 동일한 작업 추가 및 바인딩

다음 작업을 #comid (선택 메뉴 임)에 지정했습니다.

$("#comid").change(function() 
{ 
    comid = $("#comid").val(); 
    //alert(comid); 

    $('#com_photo').addClass('loading'); 

    $('#com_photo').load('ajax.php?requestType=ajax&action=get_com_photo&comid=' + comid, function() { 
     $('#com_photo').removeClass('loading'); 
     $('#com_photo img').hide(); 
     $('#com_photo img').fadeIn(1000); 
     alert('Image Loaded.'); 
    }); 
}); 

이제 위 코드가 잘 작동합니다. 사용자가 선택 메뉴에서 항목을 선택하면 변경 이벤트가 트리거되고 ajax 요청이 만들어지고 "Image Loaded"라는 경고 창이 표시됩니다.

그러나 사용자가 마우스를 사용하지 않고 대신 키보드 키/keydown을 사용하여 메뉴에서 선택하는 경우 동일한 동작을 트리거하고 싶습니다. 그것은 기본적으로 그 일을 희망하지만 그 doesnt는 사건이 될 것 그래서 내가 keyup 또는 keydown 이벤트에 대한 동일한 작업을 할당하고 싶지 않지만 (또는 복사/붙여 넣기) 같은 코드를 작성하고 싶지 않아요 다시. 내가 바인드()에 대해 알게 검색의 잠시 후

, 내가 같이 그것을 시도 :

$("#comid").bind('keyup',function(event){ 
    $("#comid").trigger('change'); 
} 

그것은 작동하지만, 내가의 keyup을 사용할 때, 난 두 번 말하는 경고 창이 표시 " 이미지로드 된 ", 그래서 그것은 두 번 요청을 만드는 것 같습니다 이후 원치 않는 동작을 찾으십시오.

내가 잘못하고있는 것이 있습니까? 또는 내가 성취하려고하는 것에 대한 더 나은 대안이 있습니까?

+2

변경 이벤트는 키보드로 변경해야합니다. 내가 생각하는 차이점은 키보드를 사용하여 onblur를 변경하거나 사용자가 다른 곳을 클릭 할 때까지는 실행되지 않는다는 것입니다. – ChrisThompson

+0

바로 그게 문제입니다. 그것에 대한 해결 방법이 있습니까? – Zubair1

답변

8
$("#comid").bind('change keyup', function(){ 
    ... 
}); 

당신은이 같은 여러 이벤트에 함수를 첨부 할 수 있습니다 :) 사전에

감사합니다. bind에 대한 설명서를 확인하십시오. 매우 유용합니다.

live에 대해 읽어 볼 수도 있습니다. (꽤 많이) bind와 똑같은 일을하지만 새로 생성 된 (일치하는) 요소에도 함수가 적용됩니다.

편집 : 선택 메뉴의 경우 화살표 키를 사용하여 옵션을 선택하면 기능이 두 번 터집니다. 귀하의 경우에는 change() 만 사용해야합니다. Keyup()은 필요하지 않습니다. 함수에

$("#comid").live({ 
    click: function(){/* code */}, 
    change: function(){/* code */} 
}); 

그런 다음 바로 포장 할 수 스크립트 및 모든 행사에서 그 함수를 호출

+0

+1, 더 간단하고 멋진 구문 -> 더 쉬운 해결책 (상황에 따라 다름). – Damb

+0

예, 이미 alittle 바인딩에 대해 소개했습니다. 그리고 나는 이벤트를 함께 모으는 방법으로 시도했지만 여전히 똑같은 일을합니다. }); – Zubair1

+0

위의 주석에서 이것은 동작을 보여주기위한 예제 코드 일뿐입니다 (예 : "body"). 약 말하는거야. – Zubair1

2

당신은 라이브() 여러 이벤트를 바인딩 할 수 있습니다.

자세한 내용은 jQuery API.

관련 문제