댓글 comment 영역의 스크립트를 onclick 으로 바꾸기 정보
댓글 comment 영역의 스크립트를 onclick 으로 바꾸기
본문
현재 그누 기본 게시판의 각각의 댓글 영역은 아래처험 되어 있습니다.
<article id="c_123">
html 코드;
<script>댓글설정 토글옵션</script>
</article>
----------
그런데 이건 c_123 전체의 innerHTML 을 바꾸는 이벤트 (제이쿼리에서는 html() 인가? 제이쿼리는 한번도 안 써 봐서 그 이름을 잘 모르겠는데 여하튼)를 줄 수 없습니다.
가령 ajax 로 댓글을 수정하고 c_123 의 내용을 바꿀 때라거나 등등... 을 실행할 수 없는 것이
애초에 innerHTML 에는 자바스크립트 소스가 해당되지 않기 때문이죠.
그래서... 이걸 innerHTML 의 적용이 가능한 코드로 바꿔 보았습니다.
----------
view_comment.skin.php 에서
<button type="button" class="btn_cm_opt btn_b01 btn"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="sound_only">댓글 옵션</span></button>
위 부분을 찾아 아래처럼 바꿉니다.
<button type="button" class="btn_cm_opt btn_b01 btn" onclick="commentDisplay(this)"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="sound_only">댓글 옵션</span></button>
----------
<ul class="bo_vc_act">
를 아래처럼 바꿉니다.
<ul class="bo_vc_act" style="display:none">
----------
아래의 스크립트를 삭제합니다.
<script>
$(function() {
// 댓글 옵션창 열기
$(".btn_cm_opt").on("click", function(){
$(this).parent("div").children(".bo_vc_act").show();
});
// 댓글 옵션창 닫기
$(document).mouseup(function (e){
var container = $(".bo_vc_act");
if( container.has(e.target).length === 0)
container.hide();
});
});
</script>
----------
문서 하단에 아래의 스크립트를 추가합니다.
function commentDisplay() {
redButton = arguments[0].nextElementSibling;
if (redButton.style.display === "none") redButton.style.display = "block";
redButton.onmouseover = function() { document.querySelector("body").onmouseup = function() { redButton.style.display = "block"; } }
redButton.onmouseout = function() { document.querySelector("body").onmouseup = function() { redButton.style.display = "none"; } }
}
추천
4
4
댓글 8개
수고가 많으시네요, 감사 합니다.
@들레아빠
감사합니다. 이 팁의 유용성은 아시는 분만 아실 듯 하네요.
감사합니다. 이 팁의 유용성은 아시는 분만 아실 듯 하네요.
비타주리님, 공유 감사드립니다. 정말 열정적이십니다!
@marty72 예 감사합니다
onclick 보다는 개인적으로 $.on() 메소드로 이벤트 리스너를 붙이는 것을 선호합니다.
@SimpleCode
죄송합니다. 저는 제이쿼리를 쓴 적이 없고 앞으로도 그럴 거에요.
$ 자가 들어가는 스크립트는 그냥 덮어버려요.ㅋ
물론 ${변수} 같은 모던 바닐라의 경우는 열외이구요.
아작스도 바닐라로 처리합니다.
만일 클릭시에 추가 옵션이 필요하다면 "천연 자바스크립트"로
addEventListener("click") 를 사용하긴 하겠죠. 이건 이 기능 이외에 달리 추가할 건덕지가 없어서 가장 간명하게 onclick 를 준 거구요.
죄송합니다. 저는 제이쿼리를 쓴 적이 없고 앞으로도 그럴 거에요.
$ 자가 들어가는 스크립트는 그냥 덮어버려요.ㅋ
물론 ${변수} 같은 모던 바닐라의 경우는 열외이구요.
아작스도 바닐라로 처리합니다.
만일 클릭시에 추가 옵션이 필요하다면 "천연 자바스크립트"로
addEventListener("click") 를 사용하긴 하겠죠. 이건 이 기능 이외에 달리 추가할 건덕지가 없어서 가장 간명하게 onclick 를 준 거구요.
@비타주리 선호하는 개발 스타일의 차이는 있을 수 있습니다. 존중합니다.
@SimpleCode
물론 저도 본인들의 스타일을 존중합니다.
아마 제이쿼리랑 부트스트랩 안 쓰고 뭘 만드는 사람은 저밖에 없을지도 모릅니다.
울 큰 애가 주로 오라클을 쓰는 jsp 개발자인데 저보고 천연기념물이라고 합니다.ㅋ
물론 저도 본인들의 스타일을 존중합니다.
아마 제이쿼리랑 부트스트랩 안 쓰고 뭘 만드는 사람은 저밖에 없을지도 모릅니다.
울 큰 애가 주로 오라클을 쓰는 jsp 개발자인데 저보고 천연기념물이라고 합니다.ㅋ
