jQuery ajax .load（）无法在IE6 / IE7 / IE8中运行 – 在FF / Safari / Chrome中工作

我有一个博客，每个post都没有详细页面。 因此，每个博客文章都有一个页脚链接，通过jQuery ajax .load（）加载评论和评论表单; 下面的代码在IE6 / 7/8中不起作用，但它在FF / Safari / Chrome中有效。 另外，我对jQuery和javascript很新，而且代码看起来很臃肿。 可以减肥吗？

$("a.load-comments").livequery(function() { $(this).click(function(){ // when you click on the link var commentsWrapper = $(this).parent("div").parent("div").find(".comments-wrapper"); // find the right comments wrapper var commentsFormWrapper = $(this).parent("div").parent("div").find(".comments-form-wrapper"); // find the right comments form wrapper var commentsLoader = $(this).parent("div").parent("div").find(".comments-loader"); // find the right loader image $(".comments-form-wrapper").fadeOut("fast"); // hide the comments form wrapper if(!$(this).hasClass("current")) { // check if link is currently opened $("a.load-comments, a.load-comments-form").removeClass("current"); // remove the 'current' class from all other links $(this).addClass("current"); // add current class to this link commentsLoader.fadeIn("fast"); // fade in the loader icon commentsWrapper.load($(this).attr("href"), function() { // load the comments commentsLoader.fadeOut("fast", function() { // fade out the loader image commentsWrapper.fadeIn("fast"); // fade in the comments }); }); } else if($(this).hasClass("current")) { // if the link does have the class 'current' $(this).removeClass("current"); // remove the class 'current' commentsWrapper.fadeOut("fast"); // fade out comments } return false; // prevent following the link }); }); 

Answer 1

您可以通过仅执行一次查找并重用它们来提高效率。 此外，您可能希望使用回调链接效果，以便在效果完成之前不会触发下一个操作。 由于你没有定义“不工作”意味着什么，所以很难知道这是否正在绊倒你。

 $("a.load-comments").livequery(function() { $(this).click(function(){ // when you click on the link var $this = $(this); var $grandpa = $this.parent("div").parent("div"); var commentsWrapper = $grandpa.find(".comments-wrapper"); // find the right comments wrapper var commentsFormWrapper = $grandpa.find(".comments-form-wrapper"); // find the right comments form wrapper var commentsLoader = $grandpa.find(".comments-loader"); // find the right loader image commentsFormWrapper.fadeOut("fast", function() { // hide the comments form wrapper if(!$this.hasClass("current")) { // check if link is currently opened $("a.load-comments, a.load-comments-form").removeClass("current"); // remove the 'current' class from all other links $this.addClass("current"); // add current class to this link commentsLoader.fadeIn("fast", function() { // fade in the loader icon commentsWrapper.load($this.attr("href"), function() { // load the comments commentsLoader.fadeOut("fast", function() { // fade out the loader image commentsWrapper.fadeIn("fast"); // fade in the comments }); }); }); } else { // we know that this has class "current" $this.removeClass("current"); // remove the class 'current' commentsWrapper.fadeOut("fast"); // fade out comments } }); return false; // prevent following the link }); }); 

Answer 2

就个人而言，我将很多东西重构为辅助方法，我不确定在实时查询中使用原型方法对绑定有多高效。 如果你向每个博客文章周围的div添加一个ID，你可以从.parent转移到一个总是更快的ID查找，那么你就可以摆脱那些减慢速度的.finds。 另外，我只是让链接调用函数而不是使用jQuery.live查找来绑定它。 假设你的博客HTML看起来像这样：

 
 ....   

然后javascript将是：

 function ToggleComments(blogPostId) { var blogPost = $("#" + blogPostId); var commentsWrapper = $("#" + blogPostId + " .comments-wrapper"); var commentsFormWrapper = $("#" + blogPostId + " .comments-form-wrapper"); var commentsLoader = $("#" + blogPostId + " .comments-loader"); var commentsLink = $("#" + blogPostId + " .comments-link"); commentsFormWrapper.fadeOut("fast", function() { if(!blogPost.hasClass("current")) { blogPost.addClass("current"); $("div.blogpost:not(id=" + blogPostId + ")").removeClass("current"); commentsLoader.fadeIn("fast"); commentsWrapper.load(commentsLink.attr("href"), function() { commentsLoader.fadeOut("fast", function() { commentsWrapper.fadeIn("fast"); }); }); } else { blogPost.removeClass("current"); commentsWrapper.fadeOut("fast"); } }); return false; } 

如果可以的话，我倾向于避免使用livequeries，除非你使用ajax.load将博客post添加到页面中，否则我不会理会它。

至于修复IE问题，我想知道它是否与livequery + event bind有关。 希望这会解决它。

Answer 3

我不确定哪个部分不适合你，但我在IE6中使用了这个：

 $("a.load-comments").live('click', function(e){ // when you click on the link e.preventDefault(); // prevent following the link var link = $(this), wrapper = link.parent('div').parent('div'), commentsWrapper = wrapper.find(".comments-wrapper"), commentsLoader = wrapper.find(".comments-loader"); $(".comments-form-wrapper").fadeOut("fast"); // hide the comments form wrapper if(!link.hasClass("current")) { // check if link is currently opened $("a.load-comments, a.load-comments-form").removeClass("current"); // remove the 'current' class from all other links link.addClass("current"); // add current class to this link commentsLoader.fadeIn("fast"); // fade in the loader icon commentsWrapper.load(link.attr("href"), function() { // load the comments commentsLoader.fadeOut("fast", function() { // fade out the loader image commentsWrapper.fadeIn("fast"); // fade in the comments }); }); } else { // if the link does have the class 'current' link.removeClass("current"); // remove the class 'current' commentsWrapper.fadeOut("fast"); // fade out comments } }); 

我的测试html看起来像这样：

 
 
 click it 
comments wrapper
 
loading....
 
  

就像之前的海报所说的那样，如果你没有特别需要livequery() （我改为live() ），你应该只使用click()附加事件一次

您也可以通过validation器运行HTML – 我遇到的一些IE错误最终是由其他浏览器忽略的标记错误引起的。

祝好运！