JQuery 加载帮助

Question

我正在尝试使用 load() 将一些 html 放入页面上的 div 中。我有很多这样的链接:

    <div id="slideshow">
        <div id="slides">
        <div class="projects">
            <a href="work/mobus.html" title="Mobus Fabrics Website">
                <img src="images/work/mobus.jpg" alt="Mobus Fabrics Website" width="280" height="100" />
            </a>

            <a href="work/eglin.html" title="Eglin Ltd Website">
                <img src="images/work/eglin.jpg" alt="Eglin Ltd Website" width="280" height="100" />
            </a>

            <a href="work/first-brands.html" title="First Brands Website">
                <img src="images/work/first-brands.jpg" alt="First Brands Website" width="280" height="100" />
            </a>
        </div>

        <a id="prev"></a>
        <a id="next"></a>
    </div>

我的 jquery 代码如下所示:

$('.projects a').click(function() {
    $('#work').load(this.href);
});

问题是，当单击时，html 被放置在 #work div 中，html 被加载到另一个页面中。请问有人可以帮忙吗？

Answer 1

您需要阻止默认操作来停止加载 href:

$('.projects a').click(function(event) {
    $('#work').load(this.href);

    event.preventDefault();
});

您可能还会看到人们通过执行以下操作来实现相同的目标:

$('.projects a').click(function(event) {
    $('#work').load(this.href);

    return false;
});

但是，此方法将阻止事件进一步冒泡，并阻止默认操作。如果您有任何 delegate 或 live 方法在 DOM 树上监听同一事件，则执行 return false 将停止这些处理程序已调用。

编辑:对于回调函数:

$('.projects a').click(function(event) {
    $('#work').load(this.href, function (text) {
        alert("This loaded: " + text);
    });

    event.preventDefault();
});