在链接上单击在容器中加载 html 页面答案

【问题标题】：On link click load html page in container在链接上单击在容器中加载 html 页面
【发布时间】：2013-08-17 09:56:30
【问题描述】：

Jquery 新手在这里有一个快速的问题。我在 html 中有两个空容器：
<aside></aside>
<section></section>

然后我将内容加载到其中：

$('aside').load('timeline.html #dates');
$('section').load('timeline.html #intro');

#dates 包含的链接在单击时应替换并将其 url 内容加载到 <section> 中，而无需重新加载整个页面。我尝试制作一个点击处理程序，但它不起作用（点击仍然离开当前页面并转到 url）：

$('a').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    var url = $(this).attr("href");
    $('section').empty().load(url);  
});

我什至尝试过这种变体，但无济于事：

$('aside a').on('click', function() {
    var url = $(this).attr("href");
    $('section').empty().load(url);
    return false;
});

我可以使用 iframe，但我不想使用 iframe，因为我正在学习 .load()。有什么建议吗？

【问题讨论】：

标签： javascript jquery ajax load

【解决方案1】：

试试这个：

$(document).on('click', 'aside a', function(e) {
    e.preventDefault();
    var url = $(this).attr("href");
    $('section').empty().load(url);
});

如果动态加载锚点，则事件可能不会附加到锚点

【讨论】：

嘿Karaxuna，我之前试过这个，但它会导致页面冻结。为什么这样做（当我输入 'click', 'aside a' 时）？
这是一个活生生的例子：link
@matenji 因为你在页面上有 242 个section 标签:)) 和$('section').empty().load(url); 当然会导致它。 $('section') 选择所有 242 个标签
谢谢！我做了更深入的 CSS 定位，这有帮助。

【解决方案2】：

也许使用ajax 而不是load？

JSFIDDLE：http://jsfiddle.net/neuroflux/yHVMA/

$('aside a').on('click', function() {
    var url = $(this).attr("href");
    $.ajax({
        url: url,
        type: 'jsonp', //for x-domain
        success: function(data) {
            console.log(data);
            $("section").html(data);
        },
        error: function(err) {
            alert("bugger!\r\n" + data);
        }
    });
    return false;
});

【讨论】：

我想我更喜欢ajax 因为success 和error 事件
stackoverflow.com/questions/753300/…
在 jsfiddle 中运行良好，但仍无法在 <section> 中加载。如果你想看的话，它现在在我的项目中：link

【解决方案3】：

您必须指定您希望页面加载的部分的 id 并加载到该部分标签中。因为您的页面中有很多部分

<section id="sec"></section>

然后是代码

 $(document).ready(function(){
     $('a').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
         var url = $(this).attr("href");
       $('#sec').empty().load(url);  
    });
    });

【讨论】：

【解决方案4】：

您在加载内容之前注册了click() 处理程序。您必须在内容加载后从load() 的complete 处理程序执行此操作：

function click_handler() {
    $(this).load($(this).attr("href"), {}, add_handlers)
    return false;
}

function add_handlers() {
    $(this).find('a').click(click_handler)
}

$('#box').load('/whatever/', {}, add_handlers)

注意每次加载新内容后add_handlers() 是如何运行的。见an example that reloads the same link when you click on it。

【讨论】：

【解决方案5】：

感谢 Karaxuna、Neuro、Sarath 和其他人，这是我开始工作的代码。 .load() 保留加载页面中导致冲突的 CSS，因此在链接单击时我只是隐藏部分并将新页面加载到 iframe 中（没有 css 冲突）。为了确保我只针对某些元素，我使用了 > 选择器，以免在图片中出现 .load() 时针对重复的标签。

<aside>
</aside>

<section>
</section>
<iframe class="no-display">
</iframe>   

<script>
 $(document).ready(function() {
    $('aside').load('timeline.html #dates');
    $('body > section').load('timeline.html #intro');
    $(document).on('click', 'aside a', function(e) {
        e.preventDefault();
        $('body > section').hide();
        $('iframe').removeClass('no-display');
        var url = $(this).attr('href');
        $('iframe').attr('src', (url));
    });
 });    
</script>

【讨论】：