负荷的html页面不刷新，当该div内的链接被点击

Question

这是我需要的东西得到完成：

基本上我有一个“地图”，上面有一些“点”;当一个点被点击，我想加载另一个图像，而不是刷新页面上的其他点（点是链接）。这样做的一种方式是获取div的显示：无，点击时，隐藏（）当前图像（以及点）和淡入淡出（），但我不想每次都加载所有图像该页面被访问。

问题：

当与普通的PHP做它，它工作完全正常：当它是“main.php”它打开图像“1-25.png”，当链接（点）为点击它打开'main.php？m = mapname'并打开'mapname.png'。但是，我希望页面保持静止，并且更改内容（不刷新）。

我有一些导航按钮的第一页，另一个带链接的页面加载的div。我需要在点击链接时更改div内的内容，而不刷新浏览器。如果我使用div外的任何链接或按钮，它会很好，但只要我尝试在div内导航，它就不起作用。

这里是一些代码： 在index.php

<a href="1.php">First</a><br> 
<a href="2.php">Second</a><br> 
<a href="3.php">Third</a><br> 
<?PHP 
include ('div.php'); 
?> 

的div.php

<div id="map"></div> 

<script> 
function getQueryVariable(variable) 
{ 
     var query = window.location.search.substring(1); 
     var vars = query.split("&"); 
     for (var i=0;i<vars.length;i++) { 
       var pair = vars[i].split("="); 
       if(pair[0] == variable){return pair[1];} 
     } 
     return(false); 
} 


     $(document).ready(function() { 

     $('#map').load('content.php'); 


     $('a').click(function() { 
      alert(getQueryVariable("m")); 

      $.ajax({ 
       type : 'GET', 
       url : 'content.php', 
       data: 'm=' + getQueryVariable("m"), 

       success : function(html) { 
        $("#map").html(html); 

       } 
      }); 
     }); 
    }); 
</script> 

和content.php

if (!isset($_GET['m']) || empty($_GET['m'])) { 
    echo "<div id=\"map1\" style=\"position: relative; left: 0; top: 0;\"> 
    <img src=\"./inc/pics/1-25.png\" style=\"position: relative; top: 0; left: 0; max-height: 500; max-width: 700;\"> 
    <a id=\"1\" href=\"index.php?m=l50\"><img src=\"./inc/pics/reddot.png\" style=\"position: absolute; top: 180; left: 180;\"></a> 
    <a id=\"2\" href=\"index.php?m=r50\"><img src=\"./inc/pics/reddot.png\" style=\"position: absolute; top: 280; left: 410;\"></a> 
</div></div>"; 
} else if ($_GET['m'] == 'l50') { 
    echo "<div id=\"map2\" style=\"position: relative; left: 0; top: 0;\"> 
    <img src=\"./inc/pics/2-50-left.png\" style=\"position: relative; top: 0; left: 0; max-height: 500; max-width: 700;\"> 
    <a id=\"3\" href=\"index.php?m=l25\"><img src=\"./inc/pics/reddot.png\" style=\"position: absolute; top: 160; left: 110; \"></a> 
    <a id=\"4\" href=\"index.php?m=tl25\"><img src=\"./inc/pics/reddot.png\" style=\"position: absolute; top: 140; left: 350;\"></a> 
    <a id=\"5\" href=\"index.php?m=bl25\"><img src=\"./inc/pics/reddot.png\" style=\"position: absolute; top: 350; left: 350;\"></a> 
</div></div>"; 
} else if ($_GET['m'] == 'r50') { 
    echo "<div style=\"position: relative; left: 0; top: 0;\"> 
    <img src=\"./inc/pics/3-50-right.png\" style=\"position: relative; top: 0; left: 0; max-height: 500; max-width: 700;\" > 
    <a id=\"6\" href=\"index.php?m=t25\"><img src=\"./inc/pics/reddot.png\" style=\"position: absolute; top: 150; left: 50;\"></a> 
    <a id=\"7\" href=\"index.php?m=b25\"><img src=\"./inc/pics/reddot.png\" style=\"position: absolute; top: 380; left: 70;\"></a> 
</div>"; 
} 

UPDATE \修复

我删除了 $('#map').load('content.php'); 从div.php，然后改变了点击事件

$('#map').on('click', 'a#1', function(event) { 

     $("#map").load('map.php?m=l50'); 
     event.preventDefault(); 
    }); 

Answer 1

尝试用这种替代目前的点击事件：

$('#map').on('click', 'a', function(event) { 
    $('#map').load($(this).attr('href')); 
    event.preventDefault(); 
}); 

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

Answer 2

如果我没有错，它可能是从Ajax返回内容的链接不工作。 您应该使用live()，而不是保持click事件仍然生活后Ajax请求已完成

$('a').live('click', function(){ 
//do something 
}); 

编辑：

的.live（）因为jQuery的1.7方法已被弃用，一直 在1.9中删除。我们建议将代码升级为使用.on（）方法 。要完全匹配$（“a.foo”）。live（“click”，fn），例如， ，您可以编写$（document）.on（“click”，“a.foo”，fn）。有关更多 信息，请参阅.on（）文档。与此同时，jQuery Migrate插件可用于恢复.live（）功能。 live() removed

在之后所有的情况下不工作，你可以把脚本到功能，以重新绑定它们当AJAX完成

Answer 3

的声音，我如果iframe是很合理的为你的使用。

然后，你需要两个div's：一个用于主地图，另一个用于详细地图，其上有iframe。然后，您将能够刷新第二个div的内容而无需刷新整个页面。 也可以从外部父页面的iframe中执行javascript/jquery，反之亦然。

这将是我第一次去的方式。我相信没有iframe也是可以的，但是有更多的编程工作。

Answer 4

JQuery .load函数是为此目的而构建的（http://api.jquery.com/load/）。它会为你节省很多麻烦。

Basicall功能加载内容到你所选择的选择如：

$("#myDiv").load('page_going_somewhere_else.php'); 

您可以点击事件把这个包火的东西被点击这样的时候：

$("a#myLink").on('click', function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 
    var url = $(this).attr("href"); 
    $("#myDiv").load(url);       
}); 

，如果您需要发送数据到您的加载页面来检查您是否可以发送这样的数据：

$("a#myLink").on('click', function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 
    var url = $(this).attr("href"); 
    $("#myDiv").load(url, {"myData":"myAnswer"});        
});