테이블 내 이벤트가 중복실행됩니다.

Question

지금까지 많은 도움을 받았지만 아직도 헤매고 있는 길잃은 초짜입니다; 개발자라는 말도 부끄럽네요 ㅠ td내 버튼 이벤트를 통해 다른 td의 값을 바꾸는 것은 그 행을 찾아 다시 값을 수정하면 되겠다는 것으로 방향을 잡은 상태입니다. 그래서 지금까지 작업한 행 추가와 삭제부분을 보안하려고 하고 있는데문제는 한 테이블의 td를 누르면 그 td가 속한 행 tr이 다른테이블로 옮겨졌을 때 중복 실행되는 문제를 정확한 원인을 찾지도, 해결하지도 못하고 있습니다...;;한 td가 추가되는 것은 넘어오는 값 중 하나를 통해 중복실행을 차단했고 alert창을 통해 한번만 실행 되는 것을 확인했습니다. 그러나 1번 행을 10번실행을 하고 난 후 한번밖에 추가되지 않은 tr행의 버튼을 한번 누르면 10번 실행되고,행 추가를 6개를 하면 추가된 행의 버튼이벤트를 실행하면 마지막은 1번 그 위는 2번 이런식으로 역순으로 누적되어서 실행됩니다. 거기다가 클릭을 더 했으면 추가되고요;이럴때 어떻게 해결해야할 지 모르겠습니다.;; 이것저것 끄적거리고 있는 현재 소스입니다; var check=""; var menu_name; var menu_price; var menu_amount = new Array(); var tbody = ""; var checknm = new Array(); var a=1; var i = 0; function add_menu(obj){ /* var $table = $("#selected_menu"); *//* var checkbt = $(this); var tr = checkbt.parent(); var td = tr.children(); *//* alert($table); alert($row); alert(checkbt); alert(tr); alert(td); */ var $row = $(obj).closest( "tr" ); menu_name = $row.find('[cname=menu_name]').text(); menu_price = $row.find('[cname=menu_price]').text(); var num = checknm.indexOf(menu_name); var isExist = (checknm.indexOf(menu_name)!== -1) var sub_opt_count = $("input[name='sub_opt_count']").val(); var row_num = ""; if(sub_opt_count == "") { row_num = 1; } else { row_num = parseInt(sub_opt_count) + 1; } if(isExist == false){ menu_amount.push(a); checknm.push(menu_name); var sub_main = '' +''+menu_name+'' +''+menu_amount[i]+'' +''+menu_price+'' +''+menu_amount[i]*menu_price+'' +'' +''; $('#selected_menu').append(sub_main); /* console.log(checknm); */ i++; } var c = 0; $('.add').click(function(){ var index = $('#add'+i+'').index(this); var $row = $(this).closest( "tr" ); alert($row); menu_amount[index]++; alert(menu_amount[index]); }); $('.sub').click(function(){ var index = $('.sub').index(this); menu_amount[index]--; alert(menu_amount[index]); }); $('.rmv').click(function(){ var index = $('.rmv').index(this); var $row = $(this).closest( "tr" ); var rmv_name = $row.find('[cname=menu_name]').text(); alert(rmv_name); alert($row); var num232 = checknm.indexOf(menu_name); /* console.log(rmv_name); alert(rmv_name); alert(num232); */ /* document.getElementById('selected_menu').deleteRow(num232); alert(checknm); */ checknm.splice("num232",1); /* alert(index); */ alert(c); c++; }); };

밤과라임 · Answer

이전에는 티바디 클릭했을 때 넘어오는 이벤트였으나 이게 중복의 원인일 것 같아 리스트로 불러온 td에 온클릭 이벤트를 두어 넘겼으나 역시 같은 증상이 발생되었습니다. 함수를 호출할때 그것을 한번 클릭하나 열번 클릭하나 버튼이벤트가 있는 곳은 한번만 들어오는 것을 확인했는데 왜 버튼 이벤트는 리스트를 클릭한 수만큼 뜨게 되는건지 의문입니다...;;

밤과라임 · Answer

아..아마 클래스로 버튼을 호출해서인가봅니다;;아니네요 아이디로 호출해도 해당 버튼 td가 있는 tr을 클릭한만큼실행됩니다;;;

앵두파파 · Answer

버튼 누를 때마다 이벤트 바인딩을 계속 해서 그래요.$(&#34;.add&#34;).off(&#34;click&#34;).click(function() {});과 같은 형식으로 바꾸셔도 되구요.더 좋은 방식은 버튼 누를 때 이벤트를 바인딩 하지 않고 처음에 $(document).ready 안에서 동적 element까지 적용 되도록 아래처럼 한번만 바인딩 하면 됩니다.$(document).on(&#34;click&#34;, &#34;.add&#34;, function() {})

밤과라임 · Answer

@앵두파파감사합니다. 그런데 제가 지금 보고있는작업은 rmv버튼쪽인데 먼저 $(".add").off("click").click(function() {}); 대로 하면 오류가 나고$(document).on("click", ".add", function() {})을 따라해보면 여전히 호출한만큼 alert발생됩니다;; $(document).on("click", ".rmv", function() { var index = $('.rmv').index(this); var $row = $(this).closest( "tr" ); var rmv_name = $row.find('[cname=menu_name]').text(); console.log(rmv_name); var num232 = checknm.indexOf(menu_name); checknm.splice("num232",1); alert(index); }); 이렇게따라해봤는데.. 이벤트가 시작되는 tbody += ''+rdata.menu[a].code_nm+''; tbody += ''+rdata.menu[a].menu_name+''; tbody += ''+rdata.menu[a].menu_price+''; 이 부분에서아무리 많이 클릭해도 이프 조건문안은 중복이 제거되어 alert를 통해 확인하면 한번밖에 들어오는 것이 확인됩니다그런데 그 안의 bth이벤트는 이전에 호출되는 onclick수만큼 버튼이벤트가 실행되는데 정말 왜그런걸까요?또 한가지 이상한점은 변수 c를 두고 버튼이벤트가 호출될때마다 증가시켜봤을때 0이 반복되는것을보면 btn이벤트가 계속 호출되는게 아니라 btb내에서 oclick수만큼 도는것을 확인할 수 있었습니다; 그런데... alert이 왜 내부에서 그렇게 반복되며 돌게될까요? 배열이 아닌 일반 변수라도 한번이 아닌 여러번이 뜨네요;;;

앵두파파 · Answer

이벤트를 바인딩 하는 소스가 function add_menu(obj){ 안에 있으면 안된다는 말씀을 드린것입니다.아래와 같이 페이지 로딩 시에 한번만 호출되게 변경해보세요.$(doucment).ready(function() { $(document).on(&#34;click&#34;, &#34;.add&#34;, function() {}) });

밤과라임 · Answer

&#64;앵두파파늦었지만 정말 감사드립니다. 제가 이리저리 바쁘게 지내다보니 마지막 답변 주신걸로이제야 실행하게 되었네요.말씀하신대로 밖으로 나오니 이벤트가 한번밖에 실행되지 않아 모든 문제를 해결할 수 있게 되었습니다.정말 많은 도움 되었습니다. 감사합니다

쑥갓 · Answer

이벤트를 바인딩 하는 소스가 function add_menu(obj){ 안에 있으면 안된다 위말이 어떤 의미인지 잘 모르겠는데,, 혹시 부연 설명 부탁드려도 될까요?$(doucment).ready(function() { $(document).on(&#34;click&#34;, &#34;.add&#34;, function() {}) });

테이블 내 이벤트가 중복실행됩니다.

7개의 답변

#td 목록