Question

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（）。有什么建议吗？

Answer 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;
});

Answer 2

试试这个：

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

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

Answer 3

您在加载内容之前注册了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。

Answer 4

您必须为要加载页面的部分指定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);  
    });
    });

Answer 5

感谢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>

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

5 个答案: