[英]How to create DOM elements on $.Ajax() Success using jquery ?
i'm creating a dynamic list of checkbox
on $.ajax
: 我在
$.ajax
上创建checkbox
的动态列表:
function load() {
$.ajax({
type: "POST",
url: "*************",
data: "************",
dataType: "json",
contentType: "application/json; charset=utf-8",
error: function (x, e) { alert(e.responseText); },
success: function (objTrendList) {
$.each(objTrendList, function (index, value) {
// append the checkbox panels to tool div
$('#tools').append('<input type="checkbox" id="checkbox_' +
value.LngTrendID + '" checked="checked" value="0" /> <div
style="display:inline;">' + value.StrTrendName + '</div><br />');
});
}
});
}
$(document).ready(function () {
load();
console.log($('#tools :checkbox')); // i know I don't get any thing here
because the this line is called before the ajax function
});
i know I don't get any thing with the console.log line because the this line is called before the ajax function 我知道console.log行没有任何帮助,因为在ajax函数之前调用了该行
Question How can i load the ajax function first i though when i do $(document).ready()
it will run last Thanks 问题我如何首先加载ajax函数,但是当我执行
$(document).ready()
时它将最后运行谢谢
Return the ajax call and use the already built in deferred object in $.ajax : 返回ajax调用,并使用$ .ajax中已内置的延迟对象:
function load() {
return $.ajax({
type: "POST",
url: "*************",
data: "************",
dataType: "json",
contentType: "application/json; charset=utf-8",
error: function (x, e) { alert(e.responseText); },
success: function (objTrendList) {
$.each(objTrendList, function (index, value) {
// append the checkbox panels to tool div
$('#tools').append('<input type="checkbox" id="checkbox_' +
value.LngTrendID + '" checked="checked" value="0" /> <div
style="display:inline;">' + value.StrTrendName + '</div><br />');
});
}
});
}
$(document).ready(function () {
load().done(function() {
console.log($('#tools :checkbox')); // i know I don't get any thing here
});
});
The reason you don't have anything in the log is because $.ajax is asynchronous (the first 'A' in AJAX stands for 'Asynchronous'). 您的日志中没有任何内容的原因是因为$ .ajax是异步的(AJAX中的第一个“ A”代表“异步”)。 Meaning that when you call your
load()
function, it fires off the $.ajax
call, but does not wait for the $.ajax
call to return before load()
returns (this is why you must specify a success
and error
function so it know what to do when it actually does return). 这意味着当您调用
load()
函数时,它会触发$.ajax
调用,但不会等到$.ajax
调用在load()
返回之前返回(这就是为什么必须指定success
和error
函数,所以它知道实际返回时该怎么做)。
We can look at a timeline of how your code gets executed: 我们可以看一下如何执行代码的时间表:
$.ajax()
returns a type of object that knows when it has returned from it's call. $.ajax()
返回一种对象的类型,该对象知道何时从调用返回。 Therefore you can call .done()
on the object and execute code in that function that will wait until after the success()
has run. 因此,您可以在对象上调用
.done()
并在该函数中执行代码,该代码将等到success()
运行之后。
therefore if you return the $.ajax
call you will be able to call .done()
and do things with your newly-added inputs. 因此,如果返回
$.ajax
调用,您将可以调用.done()
并使用新添加的输入执行操作。
function load() {
return $.ajax({...});
}
$(document).ready(function () {
load().done(function(){
console.log($('#tools :checkbox'));
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.