jQuery简单的加载和卸载内容到DIV答案

【问题标题】：jQuery simple loading and unloading content into DIVjQuery简单的加载和卸载内容到DIV
【发布时间】：2013-12-03 18:34:34
【问题描述】：

我知道以前有人问过这个问题，但我无法得到我需要的答案，所以我将尝试简化它：

当我点击.LINK时，我希望#GRID内容被其他div填充，所以我使用*：

$(".LINK").click(function(){
    $( "#GRID" ).load('my_linked_file.html .other_divs');
});

到目前为止一切顺利。但是现在我有了第二个链接，我想用它来“还原”这个加载的内容，回到它的原始状态。我只是再次做同样的事情，但它似乎不起作用。

$(".LINK2").click(function(){
    $( "#GRID" ).load('my_original_file.html .my_original_divs');
});

我很乐意上传 jsfiddle，但 .load 仅适用于服务器。如果有帮助，我可以上传一个 jsfiddle 用于说明（布局）目的吗？

（*我看到很多人建议使用隐藏和显示方法。但是我有很多内容丰富的链接，我假设这样做会显着降低我的页面速度）

有什么想法吗？

【问题讨论】：

标签： javascript jquery html jquery-load

【解决方案1】：

这样的事情对我有用：

<a href="my_linked_file.html" class="LINK">Click Me</a>
<a href="my_original_file.html" class="LINK2">Click Me 2</a>
<div id="GRID"></div>

<script type="text/javascript">
$('.LINK').on('click', function (event) {
    event.preventDefault();

    $('#GRID').load($(this).attr('href') + ' .other_divs');
});
$('.LINK2').on('click', function (event) {
    event.preventDefault();

    $('#GRID').load($(this).attr('href') + ' .original_divs');
});
</script>

【讨论】：

这很好用，直到我尝试将它添加到 DIV 内部的链接。像这样：

THIS LINK INSTEAD
所以当链接与该函数关联的在 GRID div 之外很好，但如果它是它的子级，那么它将不起作用。你知道如何解决这个问题吗？非常感谢
指向“project_sample.html”的链接是否属于 LINK 或 LINK2 类？如果您打算将其放在评论中，它仍然对我有用：
此链接有一个类
。我将它添加到原始文档中，它具有预期的结果。然后我将它添加到通过 jQuery 函数从主页加载的内容中，并且链接仍然以 div#GRID 为目标。
JrAnderson- 差不多了，谢谢！它有效，但它只有效一次。如果我单击链接，它将完美加载 .other_divs。然后我点击 LINK2 并返回到 .original_divs。完美的。但是，如果我再次单击 LINK，它不会运行 preventDefault 并加载完整的 my_linked_file.html 知道为什么会发生这种情况吗？这是一个 jsfiddle，您可以查看代码。jsfiddle.net/m/nfu 非常感谢！

【解决方案2】：

这有帮助吗？；

$( "#GRID" ).html('').load('my_original_file.html .my_original_divs');

【讨论】：

我不知道是不是因为 .LINK2 按钮添加了切换功能但它不起作用:(
尝试在 .LINK2 上阻止Default() 和 stopPropagation() 点击看看是不是...

【解决方案3】：

我通过将最后一个函数更改为：

$('.LINK2').delegate("a", "click", function(e){
    e.preventDefault();

 $('#Grid').load($(this).attr('href') + ' .thumbs');

});

【讨论】：