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

【问题标题】：OnClick Javascript Scroll to iframe location within PHP repeating resultsOnClick Javascript 滚动到 PHP 重复结果中的 iframe 位置
【发布时间】：2019-03-23 07:23:21
【问题描述】：

我有一个 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>";

index_stats_2.php 上的整个 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);

?>

【问题讨论】：

标签： javascript php html iframe

【解决方案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 元素，该过滤器将触发该事件的选定元素的后代，因此，如果您重新创建该元素，您将不会丢失您的绑定.

【讨论】：