[제이쿼리] 매개변수가 있는 function을 HTML 엘리먼트에서 분리하기

매개변수가 없는 함수는 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가 루트여야만 제대로 동작하고.. @_@
아휴 귀차나.. ㅠ.ㅠ

12 thoughts on “[제이쿼리] 매개변수가 있는 function을 HTML 엘리먼트에서 분리하기”

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

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

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

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

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

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

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

      와우! 감사합니다.

Leave a Reply

Your email address will not be published. Required fields are marked *