javascript - ページをリロードして、注入された jQuery UI 要素を表示しますか?

Question

簡単なゲームをプレイするための jQuery プラグインを作成しています。ゲームは、必要なすべての html を、それが呼び出された div に挿入し、その css シートを head にリンクします。私が直面している問題は、注入後に location.reload を呼び出すと、HTML を追加する前にページが更新されることです。呼び出さないと、jQuery UI Sliders 以外のすべてが表示されます。これらのスライダーだけをリロードして、注入後に表示されるようにするにはどうすればよいですか? (HTML をテスト HTML ファイルの本文に貼り付けるだけで、すべてが完全に機能します。唯一の問題は、ボタンを押したときに動的に追加する場合です。)

リクエストに応じて、これを行うために使用しているコードの一部を次に示します。 // HTML と CSS をロードします。$("頭").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();