使用Ajax將內容加載到div中...如何將加載新頁面的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事件處理程序來綁定click事件。

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事件綁定到body所有a.someclass元素上，其中包括動態創建的元素。

順便說一句，我添加了.someclass所以它不會綁定到所有a元素，但僅在確定a要加載從內容元素。