제이쿼리 미디어 쿼리 문제

Question

게시판 목록 스킨(list.skin.php) 에서 창 크기가 768 픽셀 이하일 때만

표 제목(TBODY TR 부분)을 클릭하면 해당 게시물로 이동하도록 자바스크립트를 짰습니다.

문제는 창 크기를 줄였다가 크게 늘리면

768 이상인데도 클릭이 됩니다.

어떻게 수정해야 하나요?

Copy

<script>

const trChangeMediaQuery = window.matchMedia('(max-width: 767px)')

 

function mobileTableRowChange(e) {
  if (e.matches) {
    $('#bo_list .tbl_head01 tbody tr').click(function() {
      window.location = $(this).find('.bo_tit a').attr('href');
    });
  } else {
    $(this).find('.bo_tit a').removeAttr("href");
  }
}

 

trChangeMediaQuery.addListener(mobileTableRowChange)

 

mobileTableRowChange(trChangeMediaQuery)

</script>

병원에서일해요 · Accepted Answer

화면이 커졌을때 addListener를 삭제해주는 스크립트도 짜야되지 않을까싶네요

엑스엠엘 · Answer

$('#bo_list .tbl_head01 tbody tr').click(function() { if( 창크기>768) window.location = $(this).find('.bo_tit a').attr('href'); }); 이러면 되지 않을까요?

jayz · Answer

일반적으로 인터넷 창화면을 줄였다 늘렸다 만으론 그때그때 사이트가 측정을 못하기 때문에

사용자가 특정 행동을 취했을때 리프레쉬를 시켜줘야하는데

reload로 새로고침을 해주면 작동할 것으로 생각됩니다

외에 구글링으로 reload 를 검색해보시면 관련 자료를 찾으실수 있을거에요!

제이쿼리 미디어 쿼리 문제

답변 3개

공유하기