Javascript JQuery window.resize不断不止一次地在我的HTML前加前缀

我正在努力使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>');
    }
});

$（窗口）.on（'resize'，function（））{
如果（$（window）.width（）每次将窗口大小调整为一个像素时，都会预先设置此参数

这可能有助于：

$resized = false;

$(window).on('resize', function(){

if($(window).width() <= 1024 && $resized==false){

$("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>');

$resized = true;

} else {

$resized = false;

}

});

$resized=false；
$（窗口）.on（'resize'，function（））{
如果（$（window）.width（）尝试删除事件侦听器上的
，然后尝试以下操作

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

一旦媒体条件正确，即浏览器窗口宽度大于或等于1024px（或最小宽度为1024px），此代码将运行。因此，在HTML中添加标记并相应设置其样式，然后将其显示设置为无，即
display:none
然后将其显示设置为
display:inline
或
display:inline block
如果需要，请参阅MDN

谢谢。
你能告诉我问题出在哪里吗？
resize（）
事件对于调整窗口大小的每一个像素都会触发一次-这就是你的问题。你在这里期望的是什么行为？我只是希望它像媒体查询一样。因此，它在1024下触发一次，但我也希望它在页面加载时工作，而不仅仅是在调整大小时。如果我删除窗口。调整大小，它在加载时工作，但在调整大小时不工作…你会e最好让元素已经存在于DOM中，然后使用实际的CSS媒体查询隐藏/显示它。这里的问题始终是每次调整窗口大小时都会创建连续的元素。嗨，Aaron，谢谢，我将查看并从中学习，当我开始工作时，我将标记为正确：）对我不起作用-仍然在问题中添加了一个小提琴：0我认为您的代码不起作用，因为事件上的侦听器几乎每次加载窗口后都在侦听事件。我不确定，但您的小提琴是否工作正常。是的，我想我的做法是错误的。可能必须返回到仅隐藏事件d使用CSS显示，但请标记我的答案，因为这将有助于解决问题…谢谢答案仅部分正确..？返回到CSS解决方案将是正确的答案，因为它是一个解决方案。如果您想提供，我将标记为正确：P
@media(min-width: 1024px){
  /*css styles*/
}