2

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，但我不想使用，因为我正在学习 .load()。有什么建议么？

4

5 回答 5

1

也许使用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;
});
于 2013-08-15T08:24:29.870 回答
1

尝试这个：

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

在您的情况下，如果动态加载锚点，则事件可能不会附加到锚点

于 2013-08-15T08:28:22.207 回答
1

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

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()请注意每次加载新内容后如何运行。查看当您单击它时重新加载相同链接的示例。

于 2013-08-15T09:15:55.590 回答
1

您必须为您希望页面加载的部分指定 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);  
    });
    });
于 2013-08-15T09:22:23.647 回答
0

感谢 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>
于 2013-08-15T17:10:49.430 回答