Whiteship's Note

[제이쿼리] 매개변수가 있는 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가 루트여야만 제대로 동작하고.. @_@
아휴 귀차나.. ㅠ.ㅠ
top

  1. Favicon of https://helols.tistory.com BlogIcon is윤군 2009.09.22 18:00 신고 PERM. MOD/DEL REPLY

    임의 attr 추가는 왠지 .. 꺼림직 한데요;;ㅎㅎ

    Favicon of http://whiteship.me BlogIcon 기선 2009.09.22 20:28 PERM MOD/DEL

    좀.. 그렇긴 해;;
    다른 방법도.. 있겠지?

  2. Favicon of http://toby.epril.com BlogIcon 토비 2009.09.22 18:34 PERM. MOD/DEL REPLY

    그르게

    Favicon of http://whiteship.me BlogIcon 기선 2009.09.22 20:30 PERM MOD/DEL

    음...

  3. Favicon of http://nije.pe.kr BlogIcon 김재진 2009.09.23 08:38 PERM. MOD/DEL REPLY

    유리겔라 ㅋㅋ

    Favicon of http://whiteship.me BlogIcon 기선 2009.09.23 10:46 PERM MOD/DEL

    난 "마틴 플라워" 라고 한적도 있어.

  4. Miracle 2009.09.23 10:49 PERM. MOD/DEL REPLY

    HTML5에 클라이언트 사이드 Database가 표준화 된다는 소문이 있으니....

    그때 쯤이면 저런 꽁수를 사용하지 않아도 되지 않을련지 ^^

    Favicon of http://whiteship.me BlogIcon 기선 2009.09.23 12:29 PERM MOD/DEL

    앗 유리갤라 횽이다.

  5. Favicon of http://steelheart.kr/ BlogIcon 전성하 2009.09.23 17:30 PERM. MOD/DEL REPLY

    a h r e f="/${meeting.study.id}/${meeting.id}"
    i m g id="btn_edit" class="action" src="/images/study/edit.png" ....
    /a

    이런 식으로 하는것도 괜찮지 않을까요?
    접근성 측면이나 시맨틱 마크업 차원에서도 맞는거 같고 자바스크립트가 없어도 링크가 잘되요.

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2009.09.23 19:07 신고 PERM MOD/DEL

    그렇군요...img 보다는 a 태그가 좋겠네요.

  6. Favicon of http://blog.lckymn.com BlogIcon Kevin 2009.09.23 18:53 PERM. MOD/DEL REPLY

    저렇게 사용하면 구버전 브라우저들에서 제대로 동작하지 않을것 같군요.
    따로 사용해야하는 값을 어딘가에 저장해 놔야 한다면,
    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 태그를
    사용하는게 나을것 같습니다.

    Favicon of https://whiteship.tistory.com BlogIcon 기선 2009.09.23 19:09 신고 PERM MOD/DEL

    아;; 히든 타입!!
    임의 속성 정의 대신 히든 타입을 사용할 수 있겠군요.

    음.. 역시 img 보다는 앵커나 버튼 태그가 낳겠네요.

    와우! 감사합니다.

Write a comment.




: 1 : 2 : 3 : 4 : 5 : ··· : 7 :