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

I have a navigation bar drop down menu that lists event titles stored in the database. I am trying to allow a user to click one of these links and bring the page to the specified event that was clicked. The problem is the target event is dynamically created by the database.

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

I believe I am having a concurrency issue because the ajax request is not completed that grabs the event and dynamically creates it. Is there a way to link to the page and wait for the event to be created from the database and scroll down to the object div.

我相信我有一个并发性的问题，因为ajax请求没有完成捕获事件并动态创建它。是否有一种方法可以链接到页面并等待从数据库创建事件并向下滚动到object div。

Here is one of the links from the nav bar:

这是导航栏的一个链接:

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

Here is the target div on the events.php page:

这是事件的目标div。php页面:

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

Is there something I can do in Javascript or PHP I can do to wait for this to load? Maybe fire a function by accessing a hidden div then the function will scroll to the div?

在Javascript或PHP中，我能做些什么来等待加载呢?也许通过访问隐藏的div来触发一个函数那么这个函数会滚动到div?

1 个解决方案

#1

Since the page won't scroll on load because the div does not exist, scroll to it once it does exists. This presumably happen on the success of the ajax query, so when that occurs, scroll your page down to the new div.

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

Example:

例子:

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