자바빵
578
2020-05-22 16:10:24
3
503

모달창의 버튼이 여러번 중복 클릭됩니다...



<script>
    $('table tr td').on("click", function() {
        console.log("선택한 셀 ID : "+this.id);
        let tdId = this.id;
        let dateTime = tdId.split("_");

        $('#btn_modalOk').on("click", function () {
            let dName = $('#select_d').val().split("Dr.")[1];
            let dNo = $('#select_d').val().split("]")[0].replace("[","");
            let text = $('#ta_note').val();

            console.log(dateTime[0] + " / " + dateTime[1]);

            console.log(dNo + " / " + text);
            $('#ta_note').val(""); // 초기화
            $('#myModal').modal('toggle'); //


            // 실행.
            $.ajax({
                url: "/c/addApp",
                data: {
                    dNo : dNo,
                    note : text,
                    appDate : dateTime[0]+" "+dateTime[1]
                },
                dataType: 'json',
                type: 'POST',
                success: function (res) {
                    let app = dName + "\n" + " " + text;
                    document.getElementById(tdId).innerText = app;
                },error: function (xhr) {
                    alert("error"+xhr.responseText);
                }
            });



        })
        $('#btn_modalClose').on("click", function () {
            $('#ta_note').val("");
        })

    })

</script>


테이블이 있고,

1.테이블의 td를 누르면 모달창이 뜹니다.

2.모달창에 입력할 내용을 적고 확인 버튼을 누르면 db로 내용을 전송합니다.

3.db전송에 성공하면, 적었던 내용을 td에 넣습니다.

3단계의 간단한 구성인데....


문제는

예를 들어 가로3 세로4 위치의 td를 누르고 위의 1~3을 진행합니다.

다시 가로3, 세로4위치의 td를 누르고 위의 1~3을 진행하면 버튼이 2번 눌려서 2~3의 과정이 2번이 실행됩니다...

또 같은 위치의 td를 누르고 3번째 반복을 하면 버튼이 3번 눌립니다.

4번 반복하면 4번 눌리구요...



어느 부분이 문제일까요???

0
  • 답변 3

  • onimusha
    9k
    2020-05-22 16:44:03
    $('table tr td') 얘가 여러 개이면 갯수만큼 
    $('#btn_modalOk') 얘에 onclick function 이 걸려서 그런 듯 싶습니다.
    $('#btn_modalOk').on('click', function () {}) 얘를 바깥으로 빼서 정의히거나
    $('#btn_modalOk').off('click').on('click', function () {}) off 후 on 으로 걸어보세요.
  • 고봉애비
    54
    2020-05-22 16:45:47 작성 2020-05-22 16:47:12 수정됨
    <script>
    
    	$(document).off('click', 'table tr td').on('click', 'table tr td', function(){
            console.log("선택한 셀 ID : "+this.id);
            let tdId = this.id;
            let dateTime = tdId.split("_");
    
    		$(document).off('click', '#btn_modalOk').on('click', '#btn_modalOk', function(){
                let dName = $('#select_d').val().split("Dr.")[1];
                let dNo = $('#select_d').val().split("]")[0].replace("[","");
                let text = $('#ta_note').val();
    
                console.log(dateTime[0] + " / " + dateTime[1]);
    
                console.log(dNo + " / " + text);
                $('#ta_note').val(""); // 초기화
                $('#myModal').modal('toggle'); //
    
    
                // 실행.
                $.ajax({
                    url: "/c/addApp",
                    data: {
                        dNo : dNo,
                        note : text,
                        appDate : dateTime[0]+" "+dateTime[1]
                    },
                    dataType: 'json',
                    type: 'POST',
                    success: function (res) {
                        let app = dName + "\n" + " " + text;
                        document.getElementById(tdId).innerText = app;
                    },error: function (xhr) {
                        alert("error"+xhr.responseText);
                    }
                });
    
    
    
            })
    
    		$(document).off('click', '#btn_modalClose').on('click', '#btn_modalClose', function(){
    
        })
    
    </script>

    위의 코드로 변경해보시고 혹시나 해결이 안되면 다시한번 달아주세요
  • 자바빵
    578
    2020-05-22 16:57:21

    onimusha님  고봉애비님 모두 정말 감사드립니다!!




     


    off가 핵심이었군요!! ㅠㅠ

     아주 기본적인 부분일꺼같은데,  필요한 기능 찾아서 바로바로 적용을 하다보니 이런 문제가 생겼네요 ㅠㅠ 덕분에 잘 작동합니다!!!
  • 로그인을 하시면 답변을 등록할 수 있습니다.