Wlsepf
120
2021-09-07 16:51:17 작성 2021-09-07 17:00:39 수정됨
1
167

j쿼리 객체를 동적으로 만드들고 이벤트를 추가 하는 과정에서 질문이 있습니다.


동적으로 만든 객체에 이벤트를 줄때 다음과 같이 하라고 했는데

$(document).on('click', '테그ID', function(){ });

그래서 저는 다음과  같은 방법으로 해봤는데

$(document).on("click", "#table_st_add_"+Number(totalTable) , function() {});

이런식으로 값이 계속 늘어나서 그에 맞는 ID 값을 줄려고 +을 이용해서 했어요

앞에 Number은 혹시 문자로 인식 하나 해서 넣었구요,

저 totalTable가 숫자로 들어가거든요, 그래서 혹시 "#table_st_add_"+1을 해봤는데 그거는 잘 작동 하더라고요.

제가 하고 싶은 방법으로 할려면 어케 해야 하나요?

밑이 모든 코드 입니다.


+

var test  = "#table_st_add_"+totalTable;

위 처럼 변수로 만들어서도 넣어봤는데 별 차이 없더라고여..


원하는 부분의 코드만 가지고 올려고 해서 $(document).ready(function() {}); 은 빠졌습니다.

            var totalTable = 0; 
   

            $('#table_st_add').click(function(){
                setTimeout(function() {
                    console.log("기존 add_totalTable 값 " + totalTable);
                    totalTable = totalTable + 1;
                    
                    console.log("add_totalTable_" + totalTable);
                    console.log("추가 되고 난후의 값 :" + totalTable);

                    $(".table_info").append (
                                        "<div  id='table_info_" + totalTable +"'>" + 
                                            "<div class='fulfillDiv'>" +
                                                "<table class='fulfillTable_T1'>" +
                                                    "<colgroup>"+
                                                    "<col width='20%' />" +
                                                    "<col width='20%' />" +
                                                    "<col width='20%' />" +
                                                    "<col width='20%' />" +
                                                    "</colgroup>" +
                                                    "<tbody>" +
                                                        "<h2 class='title_h2'>· 테이블 명세서 &nbsp; <i class='far fa-plus-square' id='table_st_add_"+totalTable+"' style='color: rgb(236, 138, 81);'></i> <i id='table_st_minus_"+totalTable +"' class='far fa-minus-square'></i></h2>" +

                                                        "<tr>" +
                                                            "<th>테이블명</th>" +
                                                            "<td class='center_td' colspan='3'><input type='text' class='shortinput_2' name='foundation_date' style='border: 1px solid #F78181; width: 99.6%;'></td>" +
                                                        "</tr>" +
                                                        "<tr>" +
                                                            "<th>테이블 설명</th>" +
                                                            "<td class='center_td'><input type='text' class='shortinput_2' name='foundation_date' style='border: 1px solid #F78181; width: 98.9%;'></td>" +
                                                            "<th>레코드 수</th>" +
                                                            "<td class='center_td'><input type='text' class='shortinput_2' name='foundation_date' style='border: 1px solid #F78181; width: 98.9%;'></td>" +
                                                        "</tr>" +
                                                        "<tr>" +
                                                            "<th>테이블 크기</th>" +
                                                            "<td class='center_td'><input type='text' class='shortinput_2' name='foundation_date' style='border: 1px solid #F78181; width: 98.9%;'></td>" +
                                                            "<th>분류</th>" +
                                                            "<td class='center_td'><input type='text' class='shortinput_2' name='foundation_date' style='border: 1px solid #F78181; width: 98.9%;'></td>" +
                                                        "</tr>" +

                                                        "<tr>" +
                                                            "<th>제공 기업</th>" +
                                                            "<td class='center_td'><input type='text' class='shortinput_2' name='foundation_date' style='border: 1px solid #F78181; width: 98.9%;'></td>" +
                                                            "<th>출처</th>" +
                                                            "<td class='center_td'><input type='text' class='shortinput_2' name='foundation_date' style='border: 1px solid #F78181; width: 98.9%;'></td>" +
                                                        "</tr>" +
                                                    "</tbody>" +
                                                "</table>" +
                                            "</div>" +

                                            "<div class='fulfillDiv' style='padding-top: 20px;'>" +
                                                "<table class='fulfillTable_T1' id='table_name'>" +
                                                    "<colgroup>" +
                                                    "</colgroup>" +
                                                    "<tbody>" +
                                                        "<h2 class='title_h2' style='border: 0px; background-color: white; padding: 0px; margin-left: 0px;'>&nbsp; <i class='far fa-plus-square' id='table_tr_add_"+totalTable+"' style='color: rgb(236, 138, 81);'></i> <i id='table_tr_minus_"+totalTable+"' class='far fa-minus-square'></i></h2>" +
                                                        "<tr>" +
                                                            "<th rowspan='2' style='background-color: #f2f2f2;'>필드명</th>" +
                                                            "<th rowspan='2' style='background-color: #f2f2f2;'>데이터 형식</th>" +
                                                            "<th rowspan='2' style='background-color: #f2f2f2;'>자릿수</th>" +
                                                            "<th colspan='2' class='boder_table' style='background-color: #f2f2f2;'>범위</th>" +
                                                            "<th rowspan='2' style='background-color: #f2f2f2;'>유효한 값</th>" +
                                                            "<th rowspan='2' style='background-color: #f2f2f2;'>제한</th>" +
                                                            "<th rowspan='2' style='background-color: #f2f2f2;'>필수 입력</th>" +
                                                            "<th rowspan='2' style='background-color: #f2f2f2;'>설명</th>" +
                                                            "</tr>" +
                                                            "<tr>" +
                                                            "<th style='background-color: #f2f2f2;'>최소</th>" +
                                                            "<th style='background-color: #f2f2f2;'>최대</th>" +
                                                        "</tr>" +

                                                        "<tr>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 97%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                        "</tr>" +

                                                    "</tbody>" +
                                                "</table>" +
                                            "</div>" +
                                        "</div>")
                     }, 200);
                     
            });


            

            $(document).on("click", "#table_st_add_"+Number(totalTable) , function() {
                    setTimeout(function() {
                    console.log("기존 add_totalTable 값 " + totalTable);
                    totalTable = totalTable + 1;
                    
                    console.log("add_totalTable_" + totalTable);

                    test = "#table_st_add_" + totalTable;

                    $(".table_info").append (
                                        "<div  id='table_info_" + totalTable +"'>" + 
                                            "<div class='fulfillDiv'>" +
                                                "<table class='fulfillTable_T1'>" +
                                                    "<colgroup>"+
                                                    "<col width='20%' />" +
                                                    "<col width='20%' />" +
                                                    "<col width='20%' />" +
                                                    "<col width='20%' />" +
                                                    "</colgroup>" +
                                                    "<tbody>" +
                                                        "<h2 class='title_h2'>· 테이블 명세서 &nbsp; <i class='far fa-plus-square' id='table_st_add_"+totalTable+"' style='color: rgb(236, 138, 81);'></i> <i id='table_st_minus_"+totalTable +"' class='far fa-minus-square'></i></h2>" +

                                                        "<tr>" +
                                                            "<th>테이블명</th>" +
                                                            "<td class='center_td' colspan='3'><input type='text' class='shortinput_2' name='foundation_date' style='border: 1px solid #F78181; width: 99.6%;'></td>" +
                                                        "</tr>" +
                                                        "<tr>" +
                                                            "<th>테이블 설명</th>" +
                                                            "<td class='center_td'><input type='text' class='shortinput_2' name='foundation_date' style='border: 1px solid #F78181; width: 98.9%;'></td>" +
                                                            "<th>레코드 수</th>" +
                                                            "<td class='center_td'><input type='text' class='shortinput_2' name='foundation_date' style='border: 1px solid #F78181; width: 98.9%;'></td>" +
                                                        "</tr>" +
                                                        "<tr>" +
                                                            "<th>테이블 크기</th>" +
                                                            "<td class='center_td'><input type='text' class='shortinput_2' name='foundation_date' style='border: 1px solid #F78181; width: 98.9%;'></td>" +
                                                            "<th>분류</th>" +
                                                            "<td class='center_td'><input type='text' class='shortinput_2' name='foundation_date' style='border: 1px solid #F78181; width: 98.9%;'></td>" +
                                                        "</tr>" +

                                                        "<tr>" +
                                                            "<th>제공 기업</th>" +
                                                            "<td class='center_td'><input type='text' class='shortinput_2' name='foundation_date' style='border: 1px solid #F78181; width: 98.9%;'></td>" +
                                                            "<th>출처</th>" +
                                                            "<td class='center_td'><input type='text' class='shortinput_2' name='foundation_date' style='border: 1px solid #F78181; width: 98.9%;'></td>" +
                                                        "</tr>" +
                                                    "</tbody>" +
                                                "</table>" +
                                            "</div>" +

                                            "<div class='fulfillDiv' style='padding-top: 20px;'>" +
                                                "<table class='fulfillTable_T1' id='table_name'>" +
                                                    "<colgroup>" +
                                                    "</colgroup>" +
                                                    "<tbody>" +
                                                        "<h2 class='title_h2' style='border: 0px; background-color: white; padding: 0px; margin-left: 0px;'>&nbsp; <i class='far fa-plus-square' id='table_tr_add_"+totalTable+"' style='color: rgb(236, 138, 81);'></i> <i id='table_tr_minus_"+totalTable+"' class='far fa-minus-square'></i></h2>" +
                                                        "<tr>" +
                                                            "<th rowspan='2' style='background-color: #f2f2f2;'>필드명</th>" +
                                                            "<th rowspan='2' style='background-color: #f2f2f2;'>데이터 형식</th>" +
                                                            "<th rowspan='2' style='background-color: #f2f2f2;'>자릿수</th>" +
                                                            "<th colspan='2' class='boder_table' style='background-color: #f2f2f2;'>범위</th>" +
                                                            "<th rowspan='2' style='background-color: #f2f2f2;'>유효한 값</th>" +
                                                            "<th rowspan='2' style='background-color: #f2f2f2;'>제한</th>" +
                                                            "<th rowspan='2' style='background-color: #f2f2f2;'>필수 입력</th>" +
                                                            "<th rowspan='2' style='background-color: #f2f2f2;'>설명</th>" +
                                                            "</tr>" +
                                                            "<tr>" +
                                                            "<th style='background-color: #f2f2f2;'>최소</th>" +
                                                            "<th style='background-color: #f2f2f2;'>최대</th>" +
                                                        "</tr>" +

                                                        "<tr>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 97%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                            "<td><input type='tel' class='phon' name='entrepreneur_num_1' style='width: 98%;'></td>" +
                                                        "</tr>" +

                                                    "</tbody>" +
                                                "</table>" +
                                            "</div>" +
                                        "</div>")
                     }, 200);
                });

            $('#table_st_minus').click(function(){
                
                setTimeout(function() {
                    console.log("기존 del_totalTable 값 " + totalTable)
                    

                    $("#table_info_" + totalTable).remove();
                    totalTable = totalTable - 1;
                    console.log("del_totalTable_" + totalTable)
                    
                    if (totalTable == -1) {
                        totalTable = 0;
                        console.log("del_totalTable_" + totalTable + "이 -로 내려갔습니다.")
                    }
                    
                }, 200);
                
            });


0
  • 답변 1

  • devKo
    67
    2021-09-07 19:23:38
    $(document).on("click", "#table_st_add_"+Number(totalTable) , function() {});
    이 부분은 Number가 제거되는게 맞습니다.

    id로 컨트롤이 힘들다면 class로 컨트롤하는 것도 방법입니다.
  • 로그인을 하시면 답변을 등록할 수 있습니다.