onResize Событие Дублирование объекта

Question

У меня возникли проблемы с событием onResize. У меня есть оператор if/else, который проверяет, изменилось ли окно < 768. Код работает отлично, но при каждом изменении размера он дублирует мой префикс на каждом триггере события изменения размера. Есть ли способ сделать это только превышением или ниже размера окна 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 { 
    } 
}