链接到另一个页面上动态创建的 div

Question

我有一个导航栏下拉菜单，其中列出了存储在数据库中的事件标题。我试图允许用户单击这些链接之一并将页面带到被单击的指定事件。问题是目标事件是由数据库动态创建的。

我相信我遇到了并发问题，因为 ajax 请求没有完成，它会抓取事件并动态创建它。有没有办法链接到页面并等待从数据库创建事件并向下滚动到对象 div。

这是导航栏中的链接之一：

<a href="events.php#2">The Choice </a>

这是 events.php 页面上的目标 div：

<div id='2'>Dynamic content</div>

我可以在 Javascript 或 PHP 中做些什么来等待它加载吗？也许通过访问隐藏的 div 来触发一个函数，然后该函数将滚动到该 div？

Answer 1

由于 div 不存在，因此页面不会在加载时滚动，请在它存在时滚动到它。这可能发生在 ajax 查询成功时，所以当发生这种情况时，将您的页面向下滚动到新的 div。

例子：

$.ajax({
  url: "test.html"
  //whatever this ajax is supposed to do.
}).success(function() {
  //make the new div
  $('body').append('<div id="newDiv></div>')
  //scroll to the new div
  $('html, body').animate({
    // window.location.hash is the div you want to scroll to as set by the link on the other page, and it even comes pre hashed ("#whatever").
    scrollTop: $(window.location.hash).offset().top
  }, 2000);
});