[제이쿼리] 매개변수가 있는 function을 HTML 엘리먼트에서 분리하기
View/JavaScript : 2009. 9. 22. 17:35
매개변수가 없는 함수는 HTML에서 분리가 쉽습니다.
$(document).ready( function(){
$("#comment_add").click(function() {
$("form").submit();
});
}
이런식으로 제이쿼리를 이용해서 click 이벤트가 발생했을 때 특정 폼을 서브밋하라고 이벤트를 등록할 수 있죠. 그러나;; 매개변수가 들어간 녀석들은 어떻게 할지 좀 난감합니다.
<img id="btn_list" class="action" src="<c:url value="/images/study/back.png"/>" onclick="javascript:fn_click_study(${meeting.study.id});"/>
예를 들어 위와 같이 특정 함수에 어떤 변수 하나를 넘겨줘야하는데, 그 값이 매번 달라지고, 목록 속에 들어있는 모든 요소들에 대한 것이라.. 페이지 로딩시에 위와 같이 등록하기가 좀...
그래서 같이 스터디 하는 형 중에 제이쿼리를 유리갤라만큼 하시는 분이 계셔서 물어봤더니 다음과 같이 해결해 두셨더군요.
<img id="btn_edit" class="action" src="<c:url value="/images/study/edit.png"/>" member="${meeting.study.id}" meeting="${meeting.id})" />
이렇게 엘리먼트에 임의이 속성을 추가합니다. 이제 페이지 로딩시에 등록할 수 있습니다.
$(document).ready( function(){
$("#btn_edit").click(function(){
var self = $(this);
var url = '<c:url value="/study/"/>' + self.attr("study") + "/meeting/update/" + self.attr("meeting") + ".do";
$(document).attr("location", url);
});
}
아.. 그나저나 c:url 정말 악몽 같네요. 저거 없으면 context path가 루트여야만 제대로 동작하고.. @_@
아휴 귀차나.. ㅠ.ㅠ
$(document).ready( function(){
$("#comment_add").click(function() {
$("form").submit();
});
}
이런식으로 제이쿼리를 이용해서 click 이벤트가 발생했을 때 특정 폼을 서브밋하라고 이벤트를 등록할 수 있죠. 그러나;; 매개변수가 들어간 녀석들은 어떻게 할지 좀 난감합니다.
<img id="btn_list" class="action" src="<c:url value="/images/study/back.png"/>" onclick="javascript:fn_click_study(${meeting.study.id});"/>
예를 들어 위와 같이 특정 함수에 어떤 변수 하나를 넘겨줘야하는데, 그 값이 매번 달라지고, 목록 속에 들어있는 모든 요소들에 대한 것이라.. 페이지 로딩시에 위와 같이 등록하기가 좀...
그래서 같이 스터디 하는 형 중에 제이쿼리를 유리갤라만큼 하시는 분이 계셔서 물어봤더니 다음과 같이 해결해 두셨더군요.
<img id="btn_edit" class="action" src="<c:url value="/images/study/edit.png"/>" member="${meeting.study.id}" meeting="${meeting.id})" />
이렇게 엘리먼트에 임의이 속성을 추가합니다. 이제 페이지 로딩시에 등록할 수 있습니다.
$(document).ready( function(){
$("#btn_edit").click(function(){
var self = $(this);
var url = '<c:url value="/study/"/>' + self.attr("study") + "/meeting/update/" + self.attr("meeting") + ".do";
$(document).attr("location", url);
});
}
아.. 그나저나 c:url 정말 악몽 같네요. 저거 없으면 context path가 루트여야만 제대로 동작하고.. @_@
아휴 귀차나.. ㅠ.ㅠ
'View > JavaScript' 카테고리의 다른 글
| [제이쿼리] 매개변수가 있는 function을 HTML 엘리먼트에서 분리하기 (12) | 2009.09.22 |
|---|---|
| [jQuery] 날짜 선택하기 (0) | 2009.07.08 |
| [JQuery] J쿼리 이용해서 속성 값 변경하기, 엘리먼트 셀렉션, 이벤트 추가하기 (2) | 2009.05.27 |
| [JavaScript] id값 변경하기 (4) | 2009.05.26 |
| document.location.href 써먹기 (2) | 2008.12.15 |
| JavaScript Calendar (0) | 2008.09.25 |
| javascript:void(0) 이게 뭔가? (4) | 2008.09.17 |
임의 attr 추가는 왠지 .. 꺼림직 한데요;;ㅎㅎ
좀.. 그렇긴 해;;
다른 방법도.. 있겠지?
그르게
음...
유리겔라 ㅋㅋ
난 "마틴 플라워" 라고 한적도 있어.
HTML5에 클라이언트 사이드 Database가 표준화 된다는 소문이 있으니....
그때 쯤이면 저런 꽁수를 사용하지 않아도 되지 않을련지 ^^
앗 유리갤라 횽이다.
a h r e f="/${meeting.study.id}/${meeting.id}"
i m g id="btn_edit" class="action" src="/images/study/edit.png" ....
/a
이런 식으로 하는것도 괜찮지 않을까요?
접근성 측면이나 시맨틱 마크업 차원에서도 맞는거 같고 자바스크립트가 없어도 링크가 잘되요.
그렇군요...img 보다는 a 태그가 좋겠네요.
저렇게 사용하면 구버전 브라우저들에서 제대로 동작하지 않을것 같군요.
따로 사용해야하는 값을 어딘가에 저장해 놔야 한다면,
hidden type을 쓰시면 될것 같은데요.
<input type="hidden" id="btn_edit_member" value="${meeting.study.id}" />
<input type="hidden" id="btn_edit_meeting" value="${meeting.id})" />
이러면 self.attr("study" ) / self.attr("meeting" ) 대신에
$("#btn_edit_member" ).val() / $("#btn_edit_meeting" ).val()
이렇게 쓰시면 되지 않을까요?
뭐 이런걸 피하고 한곳에 몰아 넣고 싶으신것 같긴합니다만...
근데 더 문제가 되는건 역시, 이미 다른분께서도 얘길 꺼내셨지만,
accessibility 인거 같네요.
아무래도 img 태그 보다는...
submit, button, image type의 input element 나 anchor 태그를
사용하는게 나을것 같습니다.
아;; 히든 타입!!
임의 속성 정의 대신 히든 타입을 사용할 수 있겠군요.
음.. 역시 img 보다는 앵커나 버튼 태그가 낳겠네요.
와우! 감사합니다.