使用Ajax将内容加载到div中...如何在加载新页面的情况下定位相同的div?

时间:2015-05-24 23:48:51

标签: javascript php html ajax hyperlink

我使用以下内容将php页面加载到div中:

var arr = jQuery.parseJSON('{"one":21,"two":35,"three":24,"four":2,"five":18}' );

var maxValue = 0;

for (key in arr)
{
     if (arr[key] > maxValue)
     {
          maxValue = arr[key];   
     }
}

console.log(maxValue);

这完全正常......但是:

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

想法?

1 个答案:

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

这样做会绑定a.someclass内所有body元素的click事件,并包含动态创建的元素。

顺便说一句,我添加了.someclass,因此它不会绑定到所有a元素,而只会绑定到要加载内容的特定a元素。