負荷的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"});        
});