innerWidth가있는 문이 동작을 변경하지 않는 이유는 무엇입니까?

Question

나는

if ($(window).innerWidth() > 768) { 
     $('.navbar-toggle').click(function() { 
      alert("wide screen"); 
     }); 
    } else { 
     $('.navbar-toggle').click(function() { 
      alert("mobile"); 
     }); 
    } 

• .CC 다음 (작은 화면) 햄버거 아이콘 '.navbar-toggle'에 대한 코드 (큰 화면) 로고 아이콘이 원하는 동작은 뷰포트/화면 크기보다 큰 768px있을 때 , 나는 alert("wide screen");를보아야한다.

어떤가. 그러나 페이지를 다시로드하지 않고 크기를 조정하고 다시 클릭하면 여전히 alert("mobile"); 대신 alert("wide screen");이됩니다 !!!

이 코드가 무엇이 잘못된 것인지 알고 싶습니다. 더 나은 방법이 있다면이를 이해할 수 있습니다.

Answer 1

$('.navbar-toggle') 부분을 제거하면 논리가 올바르게 작동합니다.

코드가 한 번 실행되고, 창이 크고 첫 번째 클릭 핸들러를 바인딩하기 때문에 이것이 원인이라고 생각됩니다. 그 핸들러는 창 크기가 조정 된 경우에도 언 바운드되지 않으므로 항상 해고됩니다.

실생활에서는 대부분의 사람들이 창 크기를 조정하지 않고 UX가 갑자기 변경되기 때문에 동작이 좋을 것입니다. 그러나 페이지를 적절히 반응 시키려면 창 크기 조정 이벤트를 감시하고 발생하면 핸들러를 바인드 해제해야합니다.

Answer 2

이와 비슷한? http://jsfiddle.net/swm53ran/117/

if 문은 버튼/링크의 onclick 안에 있습니다. 전에 본 것은 화면의 초기 크기입니다 (if 문이 클릭 밖에있을 때). 그래서 페이지의 onload, 초기 화면 크기는 와이드 스크린 또는 모바일 중 하나 였고 너비를 조정 했더라도 초기 너비에서 여전히 작동했습니다. 그러나이 코드를 사용하면 클릭 이벤트가 발생하면 현재 화면 크기를 확인하고 이에 따라 경고합니다.