javascript 将 Ajax 响应注入到 DOM 后重新加载文档准备好了吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5697131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reload Document Ready after Ajax Response Injection to the DOM?
提问by Joricam
I have a form that uses a color picker, this is defined in the Document Readywith the form select input tags. But I require to access some data trough AJAX in another page and have the response replace that form. When I do this, the jquery colorpicker stops working. I guess it would be cool to reload the Document Readyor something.
我有一个使用颜色选择器的表单，这是在Document Ready表单选择输入标签中定义的。但是我需要在另一个页面中通过 AJAX 访问一些数据，并让响应替换该表单。当我这样做时，jquery colorpicker 停止工作。我想重新加载Document Ready或其他东西会很酷。
Otherwise I think my only option is JSON to pass the variables from PHP output to jquery and then back to html, right?
否则我认为我唯一的选择是 JSON 将变量从 PHP 输出传递到 jquery，然后再返回到 html，对吗？
回答by Ben Blank
There are two basic ways to accomplish this. The first is to make the function which initializes your color picker callable from other code. The other is to manually retrigger the document's ready event. The former requires a small modification to your color picker code, but the latter will re-execute all functions bound to document.ready!Be sure that's what you want before you do it. :-)
有两种基本方法可以实现这一点。第一个是使初始化颜色选择器的函数可从其他代码调用。另一种是手动重新触发文档的就绪事件。前者需要对您的颜色选择器代码稍作修改，但后者将重新执行绑定到 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!
});
回答by Josh Leeder
You could make the color picker initializing script run from it's own function and call that once in document ready and again in the callback of your ajax call.
您可以让颜色选择器初始化脚本从它自己的函数中运行，并在文档就绪时调用一次，然后在 ajax 调用的回调中再次调用。
回答by Christoph Petschnig
You should register the events using the liveor the delegatemethod:
您应该使用live或delegate方法注册事件：
回答by Ifeanyi Chukwu
Passing back the data from server as JSON will not only accomplish your goal but will also boost the performance(SPEED) of the application and also save you bytes of bandwidth. If you still want to inject response as plain html simply initialiZe the color picker plugin in a function and call the function after your ajax success callback.
将数据从服务器作为 JSON 传回不仅可以实现您的目标，还可以提高应用程序的性能（速度），并为您节省带宽字节。如果您仍想将响应作为纯 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
}
});
});
