Question

我找到了一个轻量级的脚本，用于通过ajax提交wordpress注释。它确实提交了评论，但除了评论计数得到更新外，无法看到新评论。如果手动刷新页面，可以看到它已列出。这是代码：

jQuery(document).ready(function($){
  jQuery.noConflict();
/* the acp_long is removed here. it got printed in page head by php
   acp_lang[]:
   [0]: 'Loading...'
   [1]: 'Please enter your name.'
   [2]: 'Please enter your email address.'
   [3]: 'Please enter a valid email address.'
   [4]: 'Please enter your comment'
   [5]: 'Your comment has been added.'
   [6]: 'ACP error!'
*/
// initialise
var form, err, reply;
function acp_initialise() {
  jQuery('#commentform').after('<div id="error"></div>');
  jQuery('#submit').after('<img src="'+acp_path+'loading.gif" id="loading" alt="'+acp_lang[0]+'" />');
  jQuery('#loading').hide();
  form = jQuery('#commentform');
  err = jQuery('#error');
  reply = false;
}
acp_initialise();

jQuery('.comment-reply-link').live('click', function() {
  // checks if it's a reply to a comment
  reply = jQuery(this).parents('.depth-1').attr('id');
  err.empty();
});

jQuery('#cancel-comment-reply-link').live('click', function() {
  reply = false;
});  

jQuery('#commentform').live('submit', function(evt) {

  err.empty();

if(form.find('#author')[0]) {
  // if not logged in, validate name and email
  if(form.find('#author').val() == '') {
  err.html('<span class="error">'+acp_lang[1]+'</span>');
  return false;
  }
  if(form.find('#email').val() == '') {
  err.html('<span class="error">'+acp_lang[2]+'</span>');
  return false;
  }
  var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if(!filter.test(form.find('#email').val())) {
  err.html('<span class="error">'+acp_lang[3]+'</span>');
  if (evt.preventDefault) {evt.preventDefault();}
  return false;
  }
} // end if

if(form.find('#comment').val() == '') {
  err.html('<span class="error">'+acp_lang[4]+'</span>');
  return false;
}

jQuery(this).ajaxSubmit({

  beforeSubmit: function() {
  jQuery('#loading').show();
  jQuery('#submit').attr('disabled','disabled');
  }, // end beforeSubmit

  error: function(request){
  err.empty();
  var data = request.responseText.match(/<p>(.*)<\/p>/);
  err.html('<span class="error">'+ data[1] +'</span>');
  jQuery('#loading').hide();
  jQuery('#submit').removeAttr("disabled");
  return false;
  }, // end error()

  success: function(data) {
  try {
  // if the comments is a reply, replace the parent comment's div with it
  // if not, append the new comment at the bottom
  var response = jQuery("<ol>").html(data);
  if(reply != false) {
  jQuery('#'+reply).replaceWith(response.find('#'+reply));
  jQuery('.commentlist').after(response.find('#respond'));
  acp_initialise();

  } else {//  
  if (jQuery(document).find('.commentlist')[0]) {
  //console.log("find it"); this log line shows it finds the place to append things
  response.find('.commentlist li:last')..hide().appendTo(jQuery('.commentlist')).slideDown('slow');
  } else {
  jQuery('#respond').before(response.find('.commentlist'));
  }
  if (jQuery(document).find('#comments')[0]) {
  jQuery('#comments').html(response.find('#comments'));
  } else {
  jQuery('.commentlist').before(response.find('#comments'));
  }
  }
  form.find('#comment').val('');
  err.html('<span class="success">'+acp_lang[5]+'</span>');
  jQuery('#submit').removeAttr("disabled");
  jQuery('#loading').hide();

  } catch (e) {
  jQuery('#loading').hide();
  jQuery('#submit').removeAttr("disabled");
  alert(acp_lang[6]+'\n\n'+e);
  } // end try

  } // end success()

  }); // end ajaxSubmit()

  return false; 

}); // end form.submit()

}); // end document.ready()

上述代码中的任何提示都可能导致新评论没有显示？

更新

随着HMR在聊天室的帮助，我们用firebug进行了测试。结果是：

response.find('.commentlist li:last')
Does find the just posed reply and that
jQuery('.commentlist')
Does refer to an existing, visible div element on the page but adding the comment to the div using:
response.find('.commentlist li:last').appendTo(jQuery('.commentlist'));
Doesn't make the newly added comment show up.

非常感谢HMR，但由于我犯了拼写错误并需要时间来清理文件。我们的测试停止了

为什么append不能发布包含在“.commentlist”元素中的html。我们已经证明，当它为空时它可以工作，因为那里的html中没有显示新添加的注释。

Answer 1

假设控制台中的最后一行是“找到它”，你可以在该部分转储更多的值吗？

} else {
   if (jQuery(document).find('.commentlist')[0]) {
       console.log("find it");
       console.log("did it find:",response.find('.commentlistli:last'));
       console.log("adding to:",jQuery('.commentlist'));

Answer 2

确保您的评论位于包含class="commentlist"的HTML元素中。行jQuery('.commentlist').after(response.find('#respond'));尝试在那里插入新注释，如果没有这样的元素，它将无效。

如何在ajax提交后加载新评论？

更新

2 个答案: