將Ajax響應注入DOM後重新加載文檔？

Question

我有一個使用顏色選擇器的表單，這是在帶有表單選擇輸入標籤的Document Ready中定義的。但我需要通過另一個頁面中的AJAX訪問某些數據，並將響應替換爲該表單。當我這樣做時，jquery colorpicker停止工作。我想這會很酷，重新加載Document Ready什麼的。

否則我認爲我唯一的選擇是JSON將變量從PHP輸出傳遞給jquery，然後返回到html，對吧？

Answer 1

您可以使顏色選擇器初始化腳本從其自己的函數運行，並在文檔中調用一次，並在您的ajax調用的回調中再次調用。

Answer 2

有兩種基本的方法可以實現這一點。第一種是使用其他代碼調用可以調用顏色選擇器的函數。另一種是手動重新觸發文檔的準備事件。前者需要對拾色器代碼稍作修改，但後者將重新執行綁定到document.ready的所有函數！確保這是你想要的，然後再做。 :-)

// option one 

function setupColorPicker() { 
    // do color picking magic 
} 

$(document).ready(setupDatePicker); 

$.ajax(options).done(setupColorPicker); 

// option two 

$(document).ready(function() { 
    // do color picking magic 
}); 

$.ajax(options).done(function() { 
    $(document).trigger("ready"); // probably has unintended side-effects! 
}); 

Answer 3

您應該註冊使用live或delegate方法的事件：

• http://api.jquery.com/live/
• http://api.jquery.com/delegate/

Answer 4

從服務器作爲JSON傳回的數據將不只能實現你的目標，但也會提高應用程序的性能（SPEED），並節省你的b字節andwidth。如果您仍然希望以純html的形式注入響應，只需在函數中初始化顏色選擇器插件，然後在您的ajax成功回調之後調用該函數。

$(document).ready(function(){ 
    //page is ready 

    function colorpicker(){ 
     //initialize your color picker 

    } 

    $.ajax({ 
     url: 'serverpage.cshtml', //whatever server page 
     data: {data1: data1}, 
     success: function(){ 
     //append the response into the designated form or div 
     colorpicker(); //fire the color picker function to refresh 
     } 
    }); 
});