jquery - insert插入代码两次后

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 fiddle : http://jsfiddle.net/3zP8H/1/