单击该div中的链接时，无需刷新即可在div中加载html页面

Question

这是我需要完成的工作：

基本上，我有一个“地图”，上面有一些“点”。 当单击一个点时，我想加载另一个图像而不是上面带有其他点的点（点是链接），而不刷新页面。 一种方法是获取div的dispaly：none，然后单击它，将hide（）当前图像（及其上的点）和fadeIn（）变为新图像，但我不想每次都加载所有图像该页面被访问。

问题：

使用纯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>";
}

更新\\修复

我已经删除了$('#map').load('content.php'); 从div.php，然后将click事件更改为

    $('#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（）代替，使ajax请求完成后click事件仍然保持活动状态

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

编辑：

从jQuery 1.7开始不推荐使用.live（）方法，在1.9中已将其删除。 我们建议升级代码以改用.on（）方法。 例如，要完全匹配$（“ a.foo”）。live（“ click”，fn），可以编写$（document）.on（“ click”，“ a.foo”，fn）。 有关更多信息，请参见.on（）文档。 同时，jQuery Migrate插件可用于恢复.live（）功能。 live（）已删除

如果毕竟不起作用，您可以将脚本放入函数中，以便在ajax完成后重新绑定它们

Answer 3

在我看来， iframe对于您来说非常合理。

然后，您将需要两个div ：一个用于主地图，一个用于包含iframe的详细地图。 这样，您就可以刷新第二个div的内容，而无需刷新整个页面。 也可以从外部父页面上的iframe内部执行javascript / jquery，反之亦然。

这就是我首先要去的方式。 我相信没有iframe也是有可能的，但是需要做更多的编程工作。

Answer 4

为此，构建了JQuery .load函数（ http://api.jquery.com/load/ ）。 它将为您节省很多麻烦。

Basicall函数将内容加载到您选择的选择器中，例如：

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

您可以将其包装在click事件中，以在单击某些内容时触发，如下所示：

$("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"});                            
});