매개변수가 없는 함수는 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가 루트여야만 제대로 동작하고.. @_@
아휴 귀차나.. ㅠ.ㅠ
임의 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을 쓰시면 될것 같은데요.
이러면 self.attr(“study” ) / self.attr(“meeting” ) 대신에
$(“#btn_edit_member” ).val() / $(“#btn_edit_meeting” ).val()
이렇게 쓰시면 되지 않을까요?
뭐 이런걸 피하고 한곳에 몰아 넣고 싶으신것 같긴합니다만…
근데 더 문제가 되는건 역시, 이미 다른분께서도 얘길 꺼내셨지만,
accessibility 인거 같네요.
아무래도 img 태그 보다는…
submit, button, image type의 input element 나 anchor 태그를
사용하는게 나을것 같습니다.
아;; 히든 타입!!
임의 속성 정의 대신 히든 타입을 사용할 수 있겠군요.
음.. 역시 img 보다는 앵커나 버튼 태그가 낳겠네요.
와우! 감사합니다.