我正在尝试在我的网站中插入几行新代码。当浏览器宽度小于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');
}
}
});
答案 0 :(得分:2)
调整条件以检查是否选择了任何元素:
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/
答案 1 :(得分:1)
.not()
方法从集合中删除匹配元素,$(document)
返回只有一个元素(文档对象)的集合,您试图排除ID为{{1}的元素在集合中不存在。此外,作为一个对象是一个真正的值,你的条件总是正确的,你应该使用step-4-circle
属性作为@Kevin提及。
另请注意length
事件多次触发 ,如果您想收听此事件,最好使用resize
函数:
.setTimeout()