OnClick Javascript. Прокрутите до положения iframe в PHP, повторяя результаты.

Question

У меня есть страница PHP (index_stats_2.php), которая отображает результаты последних 5 записей из базы данных с соответствующей кнопкой просмотра, которая при нажатии отображает результаты в iframe в разделе «карта» наСтраница index.php, которая загружается изначально.Я добавил скрипт javascript, который прокручивает пользователя до iframe карты на странице index.php, однако он будет работать только один раз.Если вы прокрутите вниз и нажмете другую опцию, она не будет прокручиваться вверх.Он по-прежнему загружает результаты, но теперь пользователю придется вручную прокрутить вверх.

Как бы я изменил это так, чтобы оно работало для каждой из 5 кнопок?

код javascript на index.php:

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

код iframe в индексе.php

<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

Вы связываете событие с идентификатором элемента # click_recent , но вы воссоздаете его в DOM браузера, теряя прежнюю привязку.Он будет обновляться, потому что это кнопка формы.

Чтобы исправить это, измените свой код javascript на следующее:

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

Теперь вы свяжете событие с document *Элемент 1009 *, с фильтром, который наследует выбранные элементы, инициирующие событие, поэтому вы не потеряете привязку, если воссоздаете элемент.