Javascript 在 ajax 请求后准备好 jQuery 文档
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7529304/
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
jQuery document ready after ajax request
提问by Danny
I'm having problems with updating elements that are not ready after an ajax request.
我在更新 ajax 请求后未准备好的元素时遇到问题。
If I run my myFunction()function on page load like so:
如果我myFunction()在页面加载时运行我的函数，如下所示：
$(function() {
myFunction();
}
I have no problems at all. But if I then use something like
我完全没有问题。但是如果我然后使用类似的东西
$.ajax({
url: this.href,
dataType: "script",
complete: function(xhr, status) {
myFunction();
}
});
which returns $(".myElement").replaceWith("htmlHere"). The elements are simply not ready when the complete event fires. If I set a delay in there it works fine again.
返回$(".myElement").replaceWith("htmlHere"). 当 complete 事件触发时，这些元素根本就没有准备好。如果我在那里设置延迟，它会再次正常工作。
Is there any other event that gets fired other than 'complete' when the DOM is ready?
当 DOM 准备好时，除了“完成”之外，还有其他事件会被触发吗？
Update:
更新：
Here's the actual code:
这是实际的代码：
$(function() {
$("a.remote").live("click", function(e) {
$.ajax({
url: this.href,
dataType: "script",
success: function(xhr, status) {
myFunction();
}
});
e.preventDefault();
return false;
});
myFunction();
});
function myFunction() {
// Modify the dom in here
}
The missing ); was just a typo on my part.
失踪的 ); 只是我的一个错字。
Ive tried using success now instead of complete and it doesn't appear to make any difference.
我现在尝试使用成功而不是完成，它似乎没有任何区别。
回答by Goran Obradovic
I have set up a jsfiddlebased on your code, and it seems to be working.
我已经根据您的代码设置了一个jsfiddle，它似乎正在运行。
This is the current code:
这是当前的代码：
$(function() {
$("a.remote").live("click", function(e) {
$.ajax({
url: this.href,
dataType: "script",
success: function(xhr, status) {
myFunction();
}
});
e.preventDefault();
return false;
});
});
function myFunction() {
$("span").replaceWith("<p>test</p>");
}
And it replaces span tag with a paragraph. Please check it and compare with your code. If it is the same, then your problem somewhere other than this function (maybe in myFunction?).
它用一个段落替换 span 标签。请检查它并与您的代码进行比较。如果它是相同的，那么你的问题不是这个函数（可能在 myFunction 中？）。
回答by Timbo
You can use $(document).ready(function() { ... });to wrap up anything you want fired when the DOM has loaded. Your ajax request could be placed inside the document.readyif you want this to wait until the dom has loaded.
$(document).ready(function() { ... });当 DOM 加载时，您可以使用它来包装您想要触发的任何内容。document.ready如果您希望等待 dom 加载，您的 ajax 请求可以放在里面。
If you want to wait until the ajax has loaded its resource then you should use ajax.successrather than complete.
如果您想等到 ajax 加载其资源，那么您应该使用ajax.success而不是complete.
回答by fotanus
There is a event that triggers after every ajax call. It is called ajaxComplete.
每次ajax调用后都会触发一个事件。它被称为ajaxComplete。
$( document ).ajaxComplete(function() {
$( ".log" ).text( "Triggered ajaxComplete handler." );
});
So you can
这样你就可以
function Init(){
// stuff here
}
$(document).ready(function()
Init();
});
$(document).ajaxComplete(function()
Init();
});
回答by maxedison
Just change complete:to success:in your $.ajax()call:
只需在您的通话中更改complete:为：success:$.ajax()
$.ajax({
url: this.href,
dataType: "script",
success: function(xhr, status) {
//make your DOM changes here
myFunction();
}
});
The successfunction will run once the AJAX request receives a successful response. So make your DOM changes within that function, and then run myFunction().
success一旦 AJAX 请求收到成功响应，该函数就会运行。因此，在该函数内进行 DOM 更改，然后运行myFunction().
Edit
You seem to be trying to make the DOM changes using your myFunction(). But if you don't first insert the HTML received in the AJAX response into the DOM, then there will be nothing for myFunction()to modify. If this is indeed what's happening, then you have two options:
编辑
您似乎正在尝试使用您的myFunction(). 但是如果你不先把 AJAX 响应中收到的 HTML 插入到 DOM 中，那么就没有什么myFunction()可以修改的了。如果确实发生了这种情况，那么您有两种选择：
- Insert the response HTML into the DOM, then call
myFunction()(and all of this should happen within thesuccesscallback function). - Pass the AJAX response to
myFunction()as an argument, so thatmyFunction()can handle the DOM insertion and then do the necessary modification.
- 将响应 HTML 插入到 DOM 中，然后调用
myFunction()（所有这些都应该在success回调函数中发生）。 - 将 AJAX 响应
myFunction()作为参数传递给，以便myFunction()可以处理 DOM 插入，然后进行必要的修改。
回答by Greg
You are missing the closing parenthesis of the document ready wrapper function.
您缺少文档就绪包装函数的右括号。
$(function() {
myFunction();
});
Note the });at the end.
注意});最后。
回答by Dave Siegel
$(function() {
myFunction();
}
should be
应该
$(document).ready(function() {
myFunction();
});
Or incase you want the ajax to run on load. Do
或者，如果您希望 ajax 在负载时运行。做
$(document).ready(function() {
$.ajax();
});
