重新加載頁面以顯示注入的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元素？

回答

相關問題