jQuery ajax .load () не работает в IE6 / IE7 / IE8 - работает в FF / Safari / Chrome

Question

У меня есть блог, где в каждом сообщении нет страницы с подробностями. Поэтому каждое сообщение в блоге имеет ссылку в нижнем колонтитуле, которая загружает комментарии и форму комментария через 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

Я не уверен, какая часть не работала для вас, но у меня это работает в 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 выглядел так:

<div>
    <div>
        <a class="load-comments" href="/url">click it</a>
        <div class="comments-wrapper">comments wrapper</div>
        <div class="comments-loader">loading....</div>
    </div>
</div>

Как сказано в предыдущих постерах, если вам не нужен livequery() (который я изменил на live()), вам нужно просто прикрепить события один раз, используя click()

Вы также можете запустить свой HTML через валидатор - некоторые ошибки IE, с которыми я боролся, в конечном итоге вызваны ошибкой разметки, которую игнорировали другие браузеры.

удачи!

Answer 3

Лично я бы переориентировал многое из этого на вспомогательный метод, я не уверен, насколько эффективно использовать метод-прототип в реальном запросе для привязки. Если вы добавите идентификатор в div, который окружает каждое сообщение в блоге, вы можете перейти от .parent к поиску идентификатора, который всегда быстрее, тогда вы можете избавиться от .finds, которые замедляют работу. Кроме того, я бы просто использовал ссылку для вызова функции вместо использования поиска jQuery.live для ее привязки. Итак, если ваш HTML для блога выглядит следующим образом:

<div id="blog12" class="blogpost">
    ....
    <a href="/url/to/comments" onclick="return ToggleComments('blog12');" class="comments-link">
</div>

Тогда 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, тогда я бы не стал беспокоиться об этом.

Что касается исправления проблемы с IE, я хотел бы знать, связано ли это с привязкой к событию livequery + или как-то так. Надеюсь, это решит это.