Ajax Div切換避免重新加載內容

Question

我有一個關於將Ajax將html加載到DIV中的問題。 理想情況下，我想要的是：

帶關閉按鈕的切換div，我在這里有代碼： http : //jsfiddle.net/tymeJV/uhEgG/28/

$(document).ready(function () {
    $('#country').click(function () {
        $("#country_slide").slideToggle(function() {
            if ($(this).is(":visible")) {
                alert("im visible!");
            }
        });
    });

    $('#close').click(function (e) {
        e.preventDefault();
        $('#country_slide').slideToggle();
    });

});

然后，當擴展div時，我想要一些AJAX代碼將html文件加載到div中。 訣竅是，如果成功加載HTML，我希望它避免在div關閉並重新加載后避免重新加載HTML文件，因為我已經加載了它，只需簡單地使用按鈕切換內容即可。 我擁有的代碼（從這里得到幫助的是這個）：

http://jsfiddle.net/spadez/uhEgG/55/

$(function () {
    $('#country_link').on('click', function (e) {
        // Prevent from following the link, if there is some sort of error in
        // the code before 'return false' it would still follow the link.
        e.preventDefault();

        // Get $link because 'this' is something else in the ajax request.
        var $link = $(this);
        // Exit if the data is loaded already
        if ($link.data('loaded') === true)
            return false;

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            beforeSend: function () {
            },
            success: function (data, textStatus) {
                $("#country_slide").html(data);
                alert('request successful');
                // If successful, bind 'loaded' in the data
                $link.data('loaded', true)
            },
            error: function (xhr, textStatus, errorThrown) {
                $("#country_slide").html('Error');
            },
            complete: function () {
            },
        });
    });
});

我還沒能使它正常工作。 所以我的問題是，實際上是否有可能做到這一點，如果可以，那么對jquery有更多經驗的人可以幫助我將div切換與ajax加載腳本集成在一起。

這是我的第一個jquery腳本之一，我在使用它時遇到了一些麻煩，也許不是針對初學者的。 謝謝。

Answer 1

我編輯了您發布的小提琴 ，在適當的地方添加了對slideToogle()的調用。 還添加了一個div元素來保存已加載的html代碼。

<div id="country_slide">
    <a href="#" id="close">Close</a>
    <div class=".content"></div> <!-- This is the div I added -->
</div>

您可以在控制台中檢查日志消息，以驗證代碼是否按預期執行。 您正在執行的Ajax調用的URL始終返回錯誤，因此我更改為jsfiddle提供用於測試的URL： /echo/html/ 。

這是修改后的JS代碼：

$(function () {
    $('#close').click(function (e) {
        e.preventDefault();
        $('#country_slide').slideToggle();
    });

    $('#country_link').on('click', function (e) {
        e.preventDefault();
        var $link = $(this);
        // Exit if the data is loaded already
        if ($link.data('loaded') === true) {
            console.log('Not using Ajax.');
            $("#country_slide").slideToggle();
            return false;
        }

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/echo/html/',
            timeout: 5000,
            beforeSend: function () {
                $("#country_slide .content").html('<p>Loading</p>')
            },
            success: function (data, textStatus) {
                console.log('Fecthed with Ajax.');
                $("#country_slide .content").html(data);
                $("#country_slide").slideToggle();
                // If successful, bind 'loaded' in the data
                $link.data('loaded', true)
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
            },
            complete: function () {
            },
        });
    });
});