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

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

根据要求，以下是我正在使用的一些代码： //加载HTML和CSS。 $（“标题”）。附加( ''); $（“正文”）。附加（“”）； $（“#加载按钮”）.remove（）

$（“#游戏”）.append(
“\n”+
“
\n”+
“\n”+
“
分数：0
\n”+
“\n”+
“\n”+
“\n”+
“
\n”+
“\n”+
“\n”+
“\n”+
“
\n”+
“\n”+
“\n”+
“\n”+
“
\n”+
“\n”+
“\n”+
“明白了\n”+
“\n”+
“\n”+
“\n”+
“
错误百分比：
\n”+
“\n”+
“下一步\n”+
“\n”+
“
游戏结束
\n”+
“\n”+
“再玩一次”
);
//隐藏元素。
$（“#pickedSwatch”）.hide（）；
$（“#错误”）.hide（）；
$（“#下一步”）.hide（）；
$（“游戏结束”）.hide（）；
$（“#再次播放”）.hide（）；
//使滑块工作
$（“红色、绿色、蓝色”）。滑块(
{
方向：“水平”，
射程：“分钟”，
最高：255，
价值：127，
幻灯片：刷新样本，
更改：刷新样本
});
$（“红色”）。滑块（“值”，255）；
$（“绿色”）。滑块（“值”，140）；
$（“蓝色”）。滑块（“值”，60）；
//框更改时移动滑块的代码。
$（“#rval”）.change（函数（）
{
$（“#red”）.slider（“value”，$（this.val（））；
});
$（“#gval”）.change（function（）
{
$（“#绿色”）.slider（“value”，$（this.val（））；
});
$（“#bval”）.change（函数（）
{
$（“#蓝”）.slider（“value”，$（this.val（））；
});
//第一次生成样例并设置转弯。
generateSwatch（）；

location.reload不需要在大多数时间使用，jQuery可以在不刷新的情况下更新页面。这里注入的信息将丢失，因为jQuery在加载DOM后会对其进行操作，除非隐含，否则不会维护状态

---

您可以发布一些您目前正在使用的代码吗？

对不起，我以前很忙。我添加了代码的摘录，以便您可以看到。

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