我正在尝试建立一个简单的社交媒体网站,人们可以在其中发表帖子并对帖子发表评论(有点像facebook)。为了获取帖子和评论,我创建了两个简单的 PHP 脚本,它们以 json 格式获取结果。然后我在 jquery 中创建了两个函数 getPosts()
和getComments()
ajax 结果。成功后,这些功能 clone()
我为每个返回的帖子/评论对象创建的 html 框架。
这是我的 html 框架:-
<div class="KK-posts_feed">
<div class="KK-post_frame" style="display:none;"> //This is the div that I clone() for postings
<div class="KK-post_info_header">
<a class="KK-post_username"></a>
</div>
</div>
<div class="KK-post_text"></div>
<div class="KK-post_comment_thread" data-PID="">
<div class="KK-post_comment_box"> //This is the div that I clone for comments
<div class="KK-post_comment_user_info">
<a class="KK-post_comment_username"></a>
</div>
<div class="KK-post_comment_text"></div>
</div>
</div>
</div>
</div>
这是getPosts()
输出帖子的方法:-
function getPosts(){ //This function gets the posts and clones the html for each post
$.ajax({
type : 'GET',
url : 'fetchposts.php',
dataType: 'json',
error : function(){
$('.dash_results_bar').html('<p class="KK-post_load_error">' + "Sorry, couldn't load posts at the moment. This maybe because we are facing downtime or because the databases are being updated." + ' <a href="#" class="KK-post_load_retry">Retry</a>' + "</p>");
},
success : function(data)
{
var posts = data.posts;
if(posts.length)
{
$('.KK-post_frame:first').css("display", "block");
$(posts).each(function(index, value){
$('.KK-post_frame:first')
.clone(true)
.attr('id', (value.post_id))
.find('.KK-post_username').html(value.user_fullname)
.end()
.find('.KK-post_text').html(value.post_text)
.end()
.find('.KK-post_comment_thread').attr('data-PID', value.post_id)
.end()
.appendTo('.KK-posts_feed');
});
$('.KK-post_frame:first').css("display", "none");
}
}
});
}
这是getComments()
输出每个帖子下评论的方法:-
function getComments(){
$('.KK-post_comment_thread').each(function(){ // I run this method for each comment thread div inside each of my posts div
var pid = $(this).attr('data-PID'); // PID is the 'post id' that I use, to identify each comment thread div separately.
var self = this;
$.ajax({
type : 'POST',
url : 'fetchcomments.php',
data : 'pid='+pid, // I send the post id to the php script which returns the comments for the particular post in the form of json objects
error : function(){
$(self).html('<p class="KK-post_comment_load_error">' + "Sorry, couldn't load comments at the moment." + ' <a class="KK-post_comment_load_retry" href="#">Retry</a>' + "</p>");
},
success : function(data){
var comments = data.comments;
if(comments.length)
{
$('.KK-post_comment_box:first').css('display', 'block');
$(comments).each(function(index, value){
$('.KK-post_comment_box:first')
.clone(true)
.attr('id', value.comment_id)
.find('.KK-post_comment_username').html(value.user_fullname)
.end()
.find('.KK-post_comment_text').html(value.comment_text)
.end()
.appendTo(self);
});
$('.KK-post_comment_box:first').css('display', 'none');
}
}
});
});
}
这就是我执行上述两个函数的方式:-
$('document').ready(function(){
$.when(getPosts()).done(function(){
getComments();
});
});
而getPosts()
方法完美执行并输出帖子, getComments()
方法要么不执行,要么不显示任何结果。我不能肯定地说,因为每次刷新页面时,我只收到帖子,而不收到评论。我还检查了控制台,但没有发现脚本有任何错误。 getComments()
当我通过像$('button').click(function(){ getComments(); });
这样的点击事件处理程序执行它时,方法运行得非常好。 。因此,我知道我的两种方法都工作正常,只是我无法在页面加载时一个接一个地执行它们。有人能帮我解决这个特殊的问题吗?
最佳答案
您的 getPosts()
函数不会返回任何内容,因此您将 undefined
传递给 $.when()
。
您需要返回从 $.ajax()
返回的内容:
function getPosts(){ //This function gets the posts and clones the html for each post
return $.ajax({
// ...
关于javascript - JQuery 函数在文档加载时不执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26407208/