Question

以下是我需要完成的工作：

基本上我有一个'地图'，上面有一些'点';当点击一个点时，我想加载另一个图像而不是其他一些点（点是链接）而不刷新页面。一种方法是让div显示：没有，当点击时，隐藏（）当前图像（及其上的点）和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>";
}

UPDATE \修复

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

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

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

4 个答案:

答案 0 :(得分：0)

答案 1 :(得分：0)

答案 2 :(得分：0)

答案 3 :(得分：0)

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请求完成后保持点击事件仍然有效

$('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 迁移插件可用于恢复.live（）功能。 live() removed

如果毕竟不起作用，你可以把脚本放到函数中，以便在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');

您可以将其包含在点击事件中，以便在点击某些内容时触发：

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

在单击div中的链接时，在div中加载html页面而不刷新

4 个答案: