For문을 이용하여 유동적으로 출력된 버튼에 이벤트를 주는 방법

만들고 싶은게 있어서 jinja2를 이용하여 for문으로 여러개의 버튼을 가져오는 작업을 하게 되었다.

위의 sold out버튼은 User가 설정한 책의 갯수만큼 생기는 기능을 가지고 있는데 이 기능을 javascript에서 onclick효과를 주고 싶었다. (첫번째 버튼누르면 alert(1), 두번째 버튼누르면 alert(2)....)

처음 생각한 것은 for문을 이용하여 function을 여러개 만드는 것이었는데 생각해 보니 javascript는 호이스팅이라는 복잡한 개념때문에 함수의 위치가 의도한 위치와 다른 곳에 존재해버리는 경우가 생기다보니 for문 속에서 onclick메소드를 구현하는 것은 여간 쉬운일이 아니었다.

일단 처음 한 삽질을 적어보면

 var $cancel_button = []

        for(i=1, l=parseInt($book_list_num); i<=l; i++){

            $cancel_button[i] = $("#btn"+(i+1));

            $cancel_button[i].on('click', function(event){
               alert($cancel_button[i])
            });
        };

여러개의 변수를 저장할 배열을 선언해 준 후에 for문을 돌려서 그 안에서 onclick메소드를 만들었다. 작동이 되긴 되는데 i의 변수 값을 고정시킬 수 없어서 alert에 일정한 번호가 계속 출력되었고, 하물며 이 후에 $cancel_button은 따로 호출도 못하는 상태가 되었다.(이건 왜이러는지 모르겠음...)

여러가지 방법을 찾던 도중에 좋은 해결책을 하나 찾았는데 정규표현식을 이용하여 특정 문자열로 시작하는 id나 class를 잡을 수 있는 기능이 있었다.

 $("[id^=btn]").on('click', function(event){
        var id = $(this).attr("id");
        var number = id.replace("btn", "");
        //test alert
            alert(number)
    });

주석이 없이 코드만 봐도 명시적으로 알아보기 쉬우며 [id^=btn]의 뜻만 안다면 쉽게 응용할 수 있었다.
이는 btn으로 시작하는 모든 id를 갖고있는 DOM을 잡는 뜻이며 이 DOM이 클릭되었을 때 해당 instance의 속성인 id값을 잡아와 btn을 공백으로 바꾼 후에 그 값을 출력한다는 뜻이다.

이거 구현하느라 오늘 삽질을 엄청나게 했는데 중요한거 배웠다.