Question

我有一个PHP页面（index_stats_2.php），其中显示了数据库中最后5条记录的结果，并带有关联的查看按钮，单击该按钮将在iframe中的“地图”部分中显示结果。最初加载的index.php页面。我添加了一个JavaScript脚本，该脚本可以将用户滚动到index.php页面上的地图iframe，但是，它只能运行一次。如果向下滚动并单击其他选项，它将不会向上滚动到顶部。它仍然会加载结果，但是现在用户必须手动滚动到顶部。

我将如何更改它以使其对5个按钮中的每个按钮都起作用？

index.php上的javascript代码：

<script>
$(document).ready(function (){
            $("#click_recent").click(function (){
                //$(this).animate(function(){
                    $('html, body').animate({
                        scrollTop: $("#indexmap").offset().top
                    }, 2000);
                //});
            });
        });
</script>

index.php上的iframe代码

<div class="indexmap">
    <iframe id="indexmap" name="indexmap" class="indexmap" src="http://globe-trekking.com/vg/en/maps/map.php" frameborder="0" scrolling="no"></iframe>
</div>

index_stats_2.php上的相关按钮代码

echo "     <td width='10%'><input id='click_recent' class='btn-sm btn-primary' type='button' value='View' onclick='indexmap.location.href=\"http://globe-trekking.com/vg/en/vluchtinfo/vbijreizen/vbijreizen_kaart.php?id=" . $gID . "\"'></td>";

整个PHP脚本位于index_stats_2.php

<?php

$mysqli = mysqli_connect('xxxx', 'xxxx', 'xxxx', 'xxxx');

if (mysqli_connect_errno($mysqli)) {
    trigger_error('Database connection failed: '  . mysqli_connect_error(), E_USER_ERROR);
}

$query = "  SELECT *
            FROM tbl_reizen  r 

            INNER JOIN tbl_vluchtgegevens vg
            ON r.reizenID = vg.reisID

            GROUP BY reizen
            ORDER BY departuredate DESC
            LIMIT 5;";

$result = mysqli_query($mysqli, $query) or trigger_error("Query Failed! SQL: 
$query - Error: ". mysqli_error($mysqli), E_USER_ERROR);

if($result) {
echo"  <table class='table table-hover table-striped' width='100%'>";
echo "  <tbody>";

while($row = mysqli_fetch_assoc($result)) {
$gID = $row['reizenID'];

echo "   <tr>";
echo "     <td width='10%'><input id='click_recent' class='btn-sm btn-primary' type='button' value='View' onclick='indexmap.location.href=\"http://globe-trekking.com/vg/en/vluchtinfo/vbijreizen/vbijreizen_kaart.php?id=" . $gID . "\"'></td>";
echo "     <td width='60%' ><h6>&nbsp; &nbsp;".$row['reizen']."</h6></td>";
echo "    </tr>";

}
echo "  </tbody>";
echo "</table>";
        }

mysqli_close($mysqli);

?>

Answer 1

您正在将事件绑定到元素ID #click_recent ，但是您正在浏览器DOM上重新创建该事件，从而失去了先前的绑定。由于它是一个表单按钮，因此将不断刷新。

要解决此问题，请将您的JavaScript代码更改为此：

<script>
$(document).ready ( function ()
{
  $('document').on ( 'click', '#click_recent', function ()
  {
    $('html, body').animate ( { scrollTop: $('#indexmap').offset ().top }, 2000);
  });
});
</script>

现在，您将使用一个过滤器将事件绑定到 document 元素，该过滤器将触发事件的选定元素的后代，因此，如果您重新创建该元素，则不会丢失绑定

OnClick Javascript滚动到PHP重复结果中的iframe位置

1 个答案: