Question

我无法与$（document）.ready中的动态生成的内容进行交互。

我正在开发一个Web应用程序，在其中我可以动态生成很多内容。我正在使用Nodejs和Jquery。在$（document）.ready中，我调用一个填充函数，该函数读取数据库，生成许多列表项，并将它们附加到文档中。现在可以正常工作。我遇到了问题，因为我还希望每个列表项在模式框中具有更详细的视图，可通过单击列表项或url中的哈希值来访问。为了避免对服务器的更多调用，每个列表项都有一个隐藏字段，用于存储要放入模式框的信息。因此，转到url /＃foo将加载页面，找到ID为#foo的项目，设置模式框，然后立即显示模式框。

$(document).ready(function() {
    // Populate the list on initial page load
    populateList(); //Reads from database, uses template to create list    item elements, and appends to document with .appendchild.

    // Grab the modal box
    var modal = document.getElementById('ModalView');

    // if there is a hash, scroll to that location, and modify and show    the modal box for that item.
    if(location.hash){
        //    Find the matching list item, get the info
        var infoString =  document.getElementById(location.hash).info; 
        // Code to modify modal box based on infoString goes here
        modal.style.display = "block"; // Show Modal box
    }

这不起作用，因为.getElementByID（location.hash）始终返回null。这不是因为ID不匹配，我彻底检查了一下。如果我理解正确，那么问题在于直到$（document）.ready之后，列表项才完全不属于文档，这意味着我不能使用getElementById。我有办法从$ {document）.ready中的列表项中获取模式框的信息吗？还是页面加载时一样？

编辑：已解决。我创建了一个用于创建模式框的函数，并将其放在AJAX函数中。

Answer 1

在$(document).ready内，您可以访问在初始页面加载时加载的所有dom元素，在那里一切正常。

问题似乎是populateList是异步的，因此直到该函数完成并附加它们之后元素才准备就绪。

一种简单的方法是将回调传递给populateList函数，然后在http请求成功时调用它：

function populateList(callback) {
  // ..
  $.get('some-url').success(function() {
    // once you get a successful http response, call the callback:
    callback();
  });
}

然后，您可以在添加ID后获得它们：

$(document).ready(function() {

  populateList(function() {
    if (location.hash) {
      var infoString =  document.getElementById(location.hash).info; 
      modal.style.display = "block"; // Show Modal box
    }
  });

Answer 2

文档准备就绪后，您就开始填充列表，这意味着在populateList时数据还不存在，因此位置哈希中还没有元素。您可以使用jQuery.when等到数据在那里然后开始操作它。

function modifiyLocationHash() {
  var modal = document.getElementById('ModalView');
  var infoString =  document.getElementById(location.hash).info; 
  modal.style.display = "block";
}
$(document).ready(function() {
   $.when(populateList()).then(modifyLocationHash());
}

与$（document）.ready

2 个答案: