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

时间:2013-08-15 08:22:09

标签: javascript jquery ajax load

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

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

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

#dates包含的链接在点击时应替换并将其网址内容加载到<section>而不重新加载整个页面。我尝试制作一个点击处理程序,但它不起作用(点击仍然离开当前页面并转到网址):

$('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()。有什么建议吗?

5 个答案:

答案 0 :(得分: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;
});

答案 1 :(得分:1)

试试这个:

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

在你的情况下,如果动态加载锚,事件可能不会附加到锚

答案 2 :(得分:1)

您在加载内容之前注册了click()个处理程序。从complete的{​​{1}}处理程序加载内容后,您必须执行此操作:

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) 的方式。请参阅an example that reloads the same link when you click on it

答案 3 :(得分: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);  
    });
    });

答案 4 :(得分:0)

感谢Karaxuna,Neuro,Sarath和其他人,这是我工作的代码。 .load()从加载的页面中保留CSS导致冲突,所以在链接点击我只是隐藏部分并在iframe中加载新页面(没有css冲突)。并确保我只针对某些我正在使用&gt;的元素选择器,以便在.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>