onResize 이벤트 복제 객체

Question

onResize 이벤트에 문제가 있습니다. 나는 창 크기가 < 768인지 확인하는 if/else 문을 가지고 있습니다. 코드는 훌륭하게 작동하지만 모든 크기 변경시 모든 크기 변경 이벤트 트리거에 내 앞자리가 중복됩니다. 767 창 크기를 초과하거나 이하로만 만들 수있는 방법이 있습니까?

<div class="author-wrap"> 
    <div class="the">Sample</div> 
</div> 

하여 onResize :

onResize = function() { 
    var responsive_viewport = $(window).width(); 
    if (responsive_viewport < 768) { 
     $('.the').prepend('<h3>Hi</h3>'); 
    } else { 
    } 
} 
$(document).ready(onResize); 
$(window).bind('resize', onResize); 

여기 jsfiddle의 코드가 동작에서 볼 수있다 : http://jsfiddle.net/K7Ugc/1/

Answer 1

확인 추가되는 말머리 요소가 이미 존재하는 경우 : 그건 당신이 찾고있는 거라면 당신은 이벤트를 바인딩을 해제 할 수 있습니다. 나는이 까다로운 방법을 염두에두고 있습니다

onResize = function() { 
    var responsive_viewport = $(window).width(); 
    var author_page = $('.main-content.author-archive'); 
    var author_name = $('h3.cat-label strong').text(); 
    var author_wrap = $('.author-wrap'); 
    if (responsive_viewport < 768) { 
     if (!$('.the h3').text()){ 
     $('.the').prepend('<h3>Hi</h3>'); 
     } 
    } else { 
    } 
} 
$(document).ready(onResize); 
$(window).bind('resize', onResize); 

Answer 2

만 실행 한 번에 찾고 계십니까?

onResize = function() { 
    var responsive_viewport = $(window).width(); 
    var author_page = $('.main-content.author-archive'); 
    var author_name = $('h3.cat-label strong').text(); 
    var author_wrap = $('.author-wrap'); 
    if (responsive_viewport < 768) { 
     alert(responsive_viewport); 
     $('.the').prepend('<h3>Hi</h3>'); 
     $(window).unbind(); 
    } else { 
    } 
}