JQuery window.resize不断地在我的HTML之前不止一次

Question

我正在尝试这样做，所以我的jQuery不会不断地添加我的HTML，因为我调整了窗口大小而只是前置一次。

$(window).on('resize', function(){
    if ($(window).width() <= 1024) {
        $("header > .content-max > .row").prepend( '<a href="#" class="logout"><svg class="pulse" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22.3 22.3" style="enable-background:new 0 0 22.3 22.3;" xml:space="preserve"><g><g><path class="st0" d="M11.2,0C5,0,0,5,0,11.2c0,6.2,5,11.2,11.2,11.2c6.2,0,11.2-5,11.2-11.2C22.3,5,17.3,0,11.2,0z M17.6,17.6 c-1.7,1.7-4,2.7-6.5,2.7c-2.4,0-4.7-1-6.5-2.7C3,15.9,2,13.6,2,11.2c0-2.4,1-4.7,2.7-6.5S8.7,2,11.2,2c2.4,0,4.7,1,6.5,2.7 c1.7,1.7,2.7,4,2.7,6.5C20.3,13.6,19.4,15.9,17.6,17.6z"/><path class="st0" d="M11.2,4.3c-0.6,0-1,0.4-1,1l0,11.8c0,0.6,0.4,1,1,1c0.6,0,1-0.4,1-1l0-11.8C12.2,4.7,11.7,4.3,11.2,4.3z"/></g></g></svg></a></a>' );
        $("header > .content-max > .row").prepend( '<a href="#" class="mobile-nav"><span class="icon-bar"></span><span class="icon-bar"></span></a>' );
        $(".mobile-nav").click(function() {
            $(this).toggleClass("pushed");
            $("#main-nav").slideToggle(300);
        });
        $("body").prepend('<a href="#" class="top">Top</a>');
    }
});

我得到了一个奇怪的效果，在调整窗口大小时不断添加SVG。目前我只是设法在页面加载时正常工作，但我试图使其行为像媒体查询。

参见示例结果：

编辑：我刚注意到这也破坏了它的window.load。 ：（

更新：粗略的JSFIDDLE https://jsfiddle.net/t1xyyqfn/

Answer 1

每次调整窗口大小时，都会在前面加上这个像素。

这可能会有所帮助：

if(Arrays.asList(ticketnummerDB)
         .contains(String.valueOf(ticketnummer))) {
    // contains value
}
else {
    // does not contain value
}

希望这是有道理的！

谢谢，

亚伦

Answer 2

尝试删除on事件侦听器并尝试此操作...

$( window ).resize(function() {
$( "body" ).prepend( "<div>" + $( window ).width() + "</div>" ); //example
});

如果这不起作用，请你给我一个小提琴！

或

您可以使用css媒体查询执行相同的操作：

@media(min-width: 1024px){
  /*css styles*/
}

如果媒体条件正确，则此代码将运行，即如果浏览器窗口宽度大于或等于1024px的宽度（或者如果它的最小宽度为1024px），则添加HTML和样式的标记然后将其显示为无，即display:none，然后将其显示为display:inline或display: inline-block 如果需要，请参阅MDN docs

感谢。