jQuery AJAX 调用后访问 DOM 对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18614548/
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
Accessing DOM object after AJAX call?
提问by Shpigford
I have a typical AJAX call that appends some HTML to the current page. I want to be able to access the newly inserted HTML with typical jQuery selectors.
我有一个典型的 AJAX 调用，它将一些 HTML 附加到当前页面。我希望能够使用典型的 jQuery 选择器访问新插入的 HTML。
Here's what I'd liketo be able to do...
这里是想什么，我想能够做...
$.ajax({
url: url,
success: function(data) {
$('body').append(data);
}
});
$('#new_div').show();
#new_divwould be some HTML element from the data I retrieved. I don't necessarily want to attach events to the new elements (like click), so using something like .load()or .on()doesn't work here (as far as I know).
#new_div将是我检索到的数据中的一些 HTML 元素。我不一定想将事件附加到新元素（如click），所以使用类似.load()或.on()在这里不起作用的东西（据我所知）。
I tried setting the $.ajax()call to a variable: var new_div = $.ajax(...)but that didn't get me anywhere.
我尝试将$.ajax()调用设置为变量：var new_div = $.ajax(...)但这并没有让我在任何地方。
回答by doctororange
If you would like to manipulate the new content immediately after (or even before) inserting it to the DOM, you can put that in the AJAX success callback too:
如果您想在将新内容插入 DOM 之后（甚至之前）立即对其进行操作，您也可以将其放入 AJAX 成功回调中：
$.ajax({
url: url,
success: function(data) {
$('body').append(data);
$('#new_div').show();
}
});
On the other hand, if you want to bind handlers to content that will be added to the page via ajax, jQuery does that like this:
另一方面，如果您想将处理程序绑定到将通过 ajax 添加到页面的内容，jQuery 会这样做：
$(document).on('click', '#new_div', function(){
alert("This function is bound to all #new_div's click events, even if they are added to the DOM via ajax later!")
});
回答by roullie
how about:
怎么样：
$.ajax({
url: url,
success: function(data) {
$('body').append(data).find('#new_div').show();
}
});
回答by moonwave99
If you want to decouple your code from the callback:
如果要将代码与回调分离：
functionWithALotOfStuffToDo = function(data){
// do stuff here
}
$.ajax({
url: url,
success: functionWithALotOfStuffToDo
});
回答by johnnynotsolucky
Assuming the data being returned is something like <div id='new_div' />then try something such as
假设返回的数据类似于<div id='new_div' />然后尝试诸如
var newDiv = null;
$.ajax({
url: url,
success: function(data) {
newDiv = $(data).appendTo($('body'));
}
});
This will add the <div />to the body of your page, and assign the jQuery element to the variable newDivwhich can then be accessed again at a later stage.
这将添加<div />到页面主体，并将 jQuery 元素分配给变量newDiv，然后可以在稍后阶段再次访问该变量。
However, if you access newDivbefore successhas been returned, it will be nullor the previous value, if it was assigned previously.
但是，如果您访问newDivbeforesuccess已返回，则它将是null或以前的值，如果之前已分配。
回答by ttsushko
Actually this sort of things can be solved by following way: (I know it is similar to others, but a little bit more clear)
其实这类事情可以通过以下方式解决：（我知道它与其他人相似，但更清楚一点）
$.ajax({
url: url,
success: function(data) {
$('body').append(data);
afterHtmlAppendCallback();
}
});
function afterHtmlAppendCallback()
{
$('#new_div').show();
}
回答by Dennis Shen
I think it's ajax async cause the problem you mention.
我认为这是 ajax async 导致您提到的问题。
In jQuery ajax funciton API says: Perform an asynchronous HTTP (Ajax) request.
在 jQuery ajax 函数 API 中说：执行异步 HTTP (Ajax) 请求。
If you want to access the data from ajax right after request
如果您想在请求后立即从 ajax 访问数据
you should put you code in the ajax.success function like:
你应该把你的代码放在 ajax.success 函数中，如：
$.ajax({
url: url,
success: function(data) {
$('body').append(data);
$('#new_div').show();
}
});
Or turn the async setting into false
或者把 async 设置改成 false
$.ajax({
url: url,
async:false,
success: function(data) {
$('body').append(data);
}
});
$('#new_div').show();
that will make sure the $('#new_div') selector gets the object
这将确保 $('#new_div') 选择器获取对象
