자바스크립트 질문입니다. 선배님들 알려주세요 ㅜㅜ

Question

※ 밑줄 사진 첨부가 안되어서 수정합니다.색으로 변경했는데 나오지 않아서 //여기입니다 주석부분을 가리킵니다. 상단 $(document).ready(function(){ 있습니다 function showList(page){ replyService.getList({bno:bnoValue, page:1},function(list){ console.log("list 의 값 !" + list); let str = ""; // 콜백함수 list가 null이면 아무것도 보여지지 않아야함 if(list == null || list.length == 0){ replyUL.html(""); return; } // 반복문을 통하여 댓글을 보여주는 곳 // str을 이용해서 li 태그를 만들어 준다. for(var i = 0, len = list.length || 0; i < len; i++){ str +="

"; str +="

"+list[i].replyer+""; str +=""+replyService.displayTime(list[i].replyDate)+""; //여기입니다.str +=""; str +="

" +"" +"

"; str +="

"+list[i].reply+"

"; str +="

👍" + list[i].replyBoom + "" + "👎

"; } replyUL.html(str); }); } onclick 속성 혹시 자바 스크립트에서 만들어준 내부 태그에서는 작동을 안하나요? 밑줄 친 replyTool한테 제이쿼리 클릭 이벤트를 적용하려고 헀는데 전혀 반응이 없습니다. class 속성에서 id 속성으로도 바꿔보았고, button을 a태그로도 바꿔보았습니다. display = none으로 되어있던것도 혹시 그게 문제일 것 같애서 다른 글을 참조하여 opacity로도 바꿔보았습니다 근데 클릭하는데 alert로도 안나오고 console로도 나오지 않아요... // 등록 버튼 클릭시 일어나는 이벤트 $("#addReplyBtn").on("click",function(e){ let reply = { reply : newInputReply.val(), replyer : newInputReplyer.val(), bno : bnoValue }; replyService.add(reply,function(result){ alert("result : " + result); showList(1); }); }); // 댓글 수정 / 삭제 :(점 세개) 클릭 시 이벤트 let replyTool = $(".replyTool"); $(".replyTool").click(function(){ alert("이건 된다"); });보면 위에 클릭 이벤트는 잘 작동합니다.물론 밑에 코드도 on("click",function) ~~~으로 바꿔보았습니다.console로도 찍어 보았고요.. 해당 코드 보시면 button class replyTool로 되어있습니다. 혹시 이렇게 js로 생성해준 태그들은 click 속성을 먹지 않는 것 입니까?

작성자 날짜

konic · Accepted Answer

동적생성된 객체는 이벤트를 새로 걸어주어야 됩니다.replyUL.html(str); let replyTool &#61; $(&#34;.replyTool&#34;); $(&#34;.replyTool&#34;).click(function(){ alert(&#34;이건 된다&#34;); });이렇게 생성후에 한번더 호출해준다던지 아니면 이벤트 위임을 이용하세요. 이벤트 위임에 대해선 따로 공부해보세요.replyUL.on(&#34;click&#34;,&#34;.replyTool&#34;,function(){ alert(&#34;이건 된다&#34;); });

SHMAN · Answer

&#64;konic헉!! 감사합니다 두번째 코드 적용하니깐 됩니다..ㅠㅠ!! 위에 코드는 적용해봤는데 replyUL.html(str)부분으로 동적으로 생성된 태그들을 다시 뿌리고 html을 받아와서 click이벤트를 사용하는 방법이 맞나요?첫 번째 코드는 작동을 하지 않습니다. replyUL 부분에서 레퍼런스를 잡지 못한다고 나옵니다. 추가한 replyUL.html(str); 부분에서요 그리고 혹시 왼쪽 체크 버튼 누르면 채택이 된게 맞나용...

konic · Answer

첫번째 코드는 아래 위치에 추가되어야 합니다. function showList(page){ replyService.getList({bno:bnoValue, page:1},function(list){ console.log("list 의 값 !" + list); let str = ""; // 콜백함수 list가 null이면 아무것도 보여지지 않아야함 if(list == null || list.length == 0){ replyUL.html(""); return; } // 반복문을 통하여 댓글을 보여주는 곳 // str을 이용해서 li 태그를 만들어 준다. for(var i = 0, len = list.length || 0; i < len; i++){ str +="

"; str +="

"+list[i].replyer+""; str +=""+replyService.displayTime(list[i].replyDate)+""; str +=""; str +="

" +"" +"

"; str +="

"+list[i].reply+"

"; str +="

👍" + list[i].replyBoom + "" + "👎

"; } replyUL.html(str); let replyTool = $(".replyTool"); $(".replyTool").click(function(){ alert("이건 된다"); }); }); }

SHMAN · Answer

&#64;konic 감사합니다 상위 노드를 이용해서 하위 노드의 이벤트를 제어 하는 방식 잘배웠습니다.. 동적 태그를 다루는 방법에 대해서 알고갑니다 감사합니다!!!

자바스크립트 질문입니다. 선배님들 알려주세요 ㅜㅜ

4개의 답변

#onclick 목록