重新加载页面以显示注入的jQuery UI元素？

我正在写一个jQuery插件来玩简单的游戏。游戏将所有必要的html注入到被调用的div中，并将其css表单链接到头部。我遇到的问题是，如果我在注入之后调用了location.reload，它会在我添加HTML之前刷新页面。如果我不叫它，除了我的jQuery UI滑块之外，其他所有东西都会显示出来。我如何重新加载这些滑块，使它们在注入后显示出来？（如果我只是将HTML粘贴到测试HTML文件的主体中，那么一切都很完美 - 唯一的问题是当我动态添加它时，比如他们按下按钮。）重新加载页面以显示注入的jQuery UI元素？

根据要求，这里是一些代码我正在使用这样做： //加载HTML和CSS。 $（“head”）。append（ ''）; $（“body”）。append（''）; $（“＃load-button”）。remove（）;

$("#game").append(
     "<!-- Generated Swatch-->\n" + 
     "<div id='generatedSwatch' class ='ui-widget-content ui-corner-all'></div> </br>\n" + 
     "<!-- Score -->\n" + 
     "<p id='score'>Score: 0</p>\n" + 
     "<!-- Sliders -->\n" + 
     "<div class='slider-row'>\n" + 
     " <div id='red'></div>\n" + 
     " <input type='text' id='rval' class='input-box'></input> </br>\n" + 
     "</div>\n" + 
     "<div class='slider-row'>\n" + 
     " <div id='green'></div>\n" + 
     " <input type='text' id='gval' class='input-box'></input> </br>\n" + 
     "</div>\n" + 
     "<div class='slider-row'>\n" + 
     " <div id='blue'></div>\n" + 
     " <input type='text' id='bval' class='input-box'></input> </br>\n" + 
     "</div>\n" + 
     "<!-- Got It Button -->\n" + 
     "<button id='got-it' onclick='calculateScore()' class='button'>Got It</button>\n" + 
     "<!-- Picked Swatch -->\n" + 
     "<div id='pickedSwatch' class='ui-widget-content ui-corner-all'></div>\n" + 
     "<!-- Percent Error -->\n" + 
     "<p id='error'>Percent Error: </p>\n" + 
     "<!-- Next Button -->\n" + 
     "<button id='next' onclick='generateSwatch()' class='button'>Next</button>\n" + 
     "<!-- Game Over Message -->\n" + 
     "<p id='game-over'>Game Over</p>\n" + 
     "<!-- Play Again -->\n" + 
     "<button id='play-again' onclick='playAgain()' class='button'>Play Again</button>" 
    ); 

    // Hide Elements. 
    $("#pickedSwatch").hide(); 
    $("#error").hide(); 
    $("#next").hide(); 
    $("#game-over").hide(); 
    $("#play-again").hide(); 

    // Make Sliders Work 
    $("#red,#green,#blue").slider(
    { 
     orientation: "horizontal", 
     range: "min", 
     max: 255, 
     value: 127, 
     slide: refreshSwatch, 
     change: refreshSwatch 
    }); 
    $("#red").slider("value", 255); 
    $("#green").slider("value", 140); 
    $("#blue").slider("value", 60); 

    // Code to move slider when box changed. 
    $("#rval").change(function() 
    { 
     $("#red").slider("value", $(this).val()); 
    }); 
    $("#gval").change(function() 
    { 
     $("#green").slider("value", $(this).val()); 
    }); 
    $("#bval").change(function() 
    { 
     $("#blue").slider("value", $(this).val()); 
    }); 

    // Generates the swatch for the first time and sets the turns. 
    generateSwatch();

来源

2013-10-22 Logan Shire

location.reload不需要使用大部分时间，jQuery可以在不刷新的情况下更新页面。这里注入的信息将会丢失，因为jQuery在加载后操作DOM，除非有暗示，否则不会保持状态。

你可能会发布一些你现在使用的代码吗？

来源

2013-10-22 18:59:23

对不起，我被捆绑之前。我添加了我的代码的摘录，以便您可以看到。 –

重新加载页面以显示注入的jQuery UI元素？

回答

相关问题