insertAfter插入代码两次

Question

我试图插入几行新代码到我的网站。当浏览器宽度小于768px时，需要插入代码，并且如果代码已经存在，则不需要再次插入代码。由于某种原因，每当我将浏览器的大小调整到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

调整条件，以检查是否选择了任何元素：

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小提琴：http://jsfiddle.net/3zP8H/1/

Answer 2

.not()方法从集合中删除匹配的元件，$(document)返回一个集合，其只有一个元素（文档对象），您试图排除ID为step-4-circle的元素，该元素不存在于该集合中。也作为一个对象是一个真值，你的条件总是如此，你应该使用@Kevin提到的length属性。

还要注意的是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); 
});