append 한 table onclick Event 처리

Question

검색의 결과를 table 형태로 list 처리 하면서 아래와 같이 .append로 tr, td를 추가하였습니다.$('#btn-search').on('click',function(){ console.log('검색버튼 클릭 테스트'+$('#keyword').val()); // let importList = {keyword:"박개발"} $.ajax({ url:'/importUser' ,type:'GET' ,data:{keyword:$('#keyword').val()} // ,data:importList ,success:function(result){ console.log(result); $('#list').empty(); $(result).each(function(index,item){// 반복문 사용해서 member list 가져오기 $('#list').append(''); // $('#list').append(''); $('#list').append(''+item.userIdx+''); $('#list').append(''+item.userName+''); $('#list').append(''+item.userComp+''); $('#list').append(''+item.userDept+''); $('#list').append(''+item.userRegisterDate+''); $('#list').append(''); }); // console.log($('#list').text()); } }); });그리고나서 그 테이블의 요소(tr또는 td)를 클릭하면,그 안에 담긴 값을 추출하고싶은데append 때문인지 제대로 값이 출력되지가 않습니다. $('#tbl tbody').click(function (){ let idx=$('#idx').text(); console.log($('#list').text()); $.ajax({ url:'/detailUser' ,type:'GET' ,data:{'idx':idx} ,success:function(result){ // console.log(result); $('#btn-close').trigger('click'); //모달창 닫기 $('#userTotalInfoFrm')[0].reset(); // 전체 요소 지우기 $(result).each(function(index,item){// 폼에 데이터 가져오기 queryString.push(item.userIdx, item.userName, item.userSocialSecunum, item.userSex, item.userComp, item.userCompEnterdate , item.userDept, item.userSpot, item.userArmyServ, item.userMaritalStatus, item.userArmyServEnter, item.userArmyServLeave , item.userArmyServPeriod, item.userTelnumWired, item.userTelnumWireless, item.userEmail, item.userZipcode, item.userAddress , item.eduSchoolName, item.eduStatus, item.eduYear, item.eduMonth , item.qualifiName, item.qualifiGetdate , item.careerCompName, item.careerEnterdate, item.careerLeavedate, item.careerSpot, item.careerResponsiv , item.trainingName, item.trainingStartdate, item.trainingEnddate, item.trainingAgency , item.licenName, item.licenSkillLevel , item.skillProjectName, item.skillStartdate, item.skillEnddate, item.skillCustomerComp, item.skillWorkComp, item.skillApplied, item.skillIndustry , item.skillRole, item.skillModel, item.skillOs, item.skillLang, item.skillDbms, item.skillComm, item.skillTool, item.skillEtc); }); console.log(result); } }); });정확하게는 tr, 그 행을 클릭했을 때,그 행의 userIdx 값을 데이터로 넘겨서 회원정보를 불러오고싶은데행이 2개 이상일때 하나의 값만 받아온다든지, 행의 전체 데이터를 다 출력한다든지..append를 쓰면 정확한 값을 가져올 수가 없는건가요?

즈루시 · Accepted Answer

id는 유니크 해야합니다. tr (or) td 를 클릭하면인데 tbody 에 이벤트를 거셨네요. html을 하드코딩으로 append 하지마시고 html Element 를 자바스크립트 객체로 생성하시고 거기에 이벤트 바인딩을 거시는게 좋을것 같아요.

Lavely · Answer

그러게요..답답한 심정에 지푸라기 잡는 심정으로 여기저기에 id를..ㅠㅠ tr or td를 클릭하면인데 tbody까지밖에 이벤트가 안먹더라구요... tr과 td가 append 처리 된 상태라서 코드로 인식을 못하는 것 같아요ㅜㅜ결국은 append가 문제네요..append는 그럼 못쓰는건가요?

NULL만나면 · Answer

append()이 문제라기 보단요.일단 손쉬운 방법으로는 html로 인식될 문자열에 직접 onclick 이벤트를 작성하면 해결은 될 겁니다.

Lavely · Answer

append를 하면 태그를 인식하지 못하고 문자열로 인식하기 때문에 tr이나 td에 직접 onclick 이벤트를 작성해도 태그가 안먹습니다.안되는걸 왜 안되지... 하고 신입이가 객기를 부렸습니다..길 돌려서 다른 방법으로 했습니다. 다른 방법으로도 얼마든지 구현할 수 있다는게 너무 매력적이에요!답변 감사합니다!

append 한 table onclick Event 처리

4개의 답변

#append 목록