insertAfter ввод кода дважды

Question

Я пытаюсь вставить несколько строк нового кода на свой сайт. Код должен быть вставлен, когда ширина браузера меньше 768 пикселей, а если код уже существует, его не нужно вставлять снова. По какой-то причине, когда я изменяю размер браузера до менее 768, код вставляется дважды, а затем еще раз каждый раз, когда я изменяю его размер. Кто-нибудь знает, почему эта строка кода вставлена ​​несколько раз?

$(window).resize(function() { 
    if ($(window).width() < 768) { 
    if ($(document).not('#step-4-circle')) { 
     $('<div id="step-4-circle" class="step-circle"><div class="inner"><span class="number">4</span><span class="title">FULFILL ORDERS</span><span class="subtitle">where you want</span></div></div>').insertBefore('#how-step-3'); 
    } 
    } 

}); 

Answer 1

Adjust условное, чтобы проверить, были выбраны любые элементы:

if ($('#step-4-circle').length == 0) { 
    $('<div id="step-4-circle" class="step-circle"><div class="inner"><span class="number">4</span><span class="title">FULFILL ORDERS</span><span class="subtitle">where you want</span></div></div>').insertBefore('#how-step-3'); 
} 

JS FIDDLE:http://jsfiddle.net/3zP8H/1/

Answer 2

.not() метод удаляет совпадающие элементы из коллекции, $(document) возвращает коллекцию, которая имеет только один элемент (объект документа), вы пытаетесь исключить элемент с идентификатором step-4-circle, который не существует в наборе. Также как объект является правдивым значением, ваше состояние всегда верно, вы должны использовать свойство length, как упоминает @Kevin.

отметить также, что resize события вызываются много раз, если вы хотите, чтобы слушать это событие было бы лучше использовать .setTimeout() функции:

var t = null; 
var $w = $(window).resize(function() { 
    clearTimeout(t); 
    t = setTimeout(function(){ 
     if ($w.width() < 768) { 
       if ($('#step-4-circle').length == 0) 
       $('<div id="step-4-circle">...</div>').insertBefore('#how-step-3'); 
     } else { 
       $('#step-4-circle').remove(); 
     } 
    }, 80); 
});