javascript - 使用 Ajax 将内容加载到 div 中...如何将加载的新页面定位到同一 div？

Question

我使用以下命令将 php 页面加载到 div 中:

<li><a href="content1.php" data-target="#right_section">Some Content</a></li>

$('[data-target]').click( function (e) {
var target = $($(this).attr('data-target'));
target.load($(this).attr('href'));
e.preventDefault(); // prevent anchor from changing window.location
});

<div id="right_section"></div>

这工作得很好......但是:

我想将另一个页面加载到同一个 div 中，但链接位于 content1.php 中。我基本上希望它在单击链接时用另一个页面覆盖自身。

想法？

Answer 1

您应该使用 jQuery 的 .on 事件处理程序来绑定(bind)单击事件。

http://api.jquery.com/on/

在你的情况下，它看起来像:

主页:

<li><a href="content1.php" class="load-external" data-target="#right_section">Some Content</a></li>
<div id="right_section"></div>

<script>
$(document).ready(function()){
    $('body').on('click', 'a.load-external', function(e){
        var target = $( $(this).attr('data-target') );
        target.load( $(this).attr('href') );
        e.preventDefault();
    });
});
</script>

content1.php

<li><a href="content2.php" class="load-external" data-target="#right_section">Some Content 2</a></li>

这将执行的操作是将 click 事件绑定(bind)到 body 内的所有 a.someclass 元素上，其中包括动态创建的元素。

顺便说一句，我添加了 .someclass ，这样它就不会绑定(bind)到所有 a 元素，而只会绑定(bind)到您想要的特定 a 元素从中加载内容。