使用 jQuery 加载内容而不刷新答案

【问题标题】：load Content with jQuery without refresh使用 jQuery 加载内容而不刷新
【发布时间】：2011-07-21 06:45:57
【问题描述】：

我想用 jQuery 加载内容（是 html）。为什么下面的代码对我不起作用？
我使用本教程：http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

html:
点击每个链接加载页面它（href）。

<div id="icon">
    <a href="http://localhost/test/test2.php" id="delete_icon"></a>
    <a href="<?=base_url();?>admin/tour/insert_foreign" id="add_icon" ></a>
    <a href="http://localhost/test/1st.htm" id="edit_icon" ></a>
    <a href="http://localhost/test/index1.php" id="print_icon"></a>
    </div>

js:

var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function () {
    var href = $(this).attr('href');
    if (hash == href.substr(0, href.length - 5)) {
        var toLoad = hash + '.html #content';
        $('#content').load(toLoad)
    }
});

$('#icon a').click(function () {

    var toLoad = $(this).attr('href') + ' #content';
    $('#content').hide('fast', loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5);

    function loadContent() {
        $('#content').load(toLoad, '', showNewContent())
    }

    function showNewContent() {
        $('#content').show('normal', hideLoader());
    }

    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    return false;

});

【问题讨论】：

您是否尝试过将event 放入点击功能中：function(event){ ... 然后执行event.preventDefualt()？
op 写了 return false; 与 event.preventdefault 一样

标签： javascript jquery

【解决方案1】：

首先：

究竟是什么不工作？
您是否遇到错误？
XHR 是否正确触发？（看 http://fixingthesejquery.com/#slide33 一些调试技巧）

如果您希望正确回答您的问题，您应该尽可能多地提供相关信息。

其次，快速看代码：

您需要在回调函数时传递对函数的引用，而不是调用函数（showNewContent() 而不是 showNewContent），并传递它返回的任何内容（在您的情况下，什么都没有）。

试试这个：

function loadContent() {
    $('#content').load(toLoad, '', showNewContent);
}

function showNewContent() {
    $('#content').show('normal', hideLoader);
}

【讨论】：