Question

在尝试动态生成HTML中的超链接的侧边栏索引时，我遇到了一个有趣的怪癖，该索引已经被.load()方法放入div中。

脚本找到适当的锚标记并在旁边再现它们，但在.load()更新DOM之前在占据元素的内容中找到它们。

相关JS：

var $result = $("#result"); // optimize!
var $aside = $("aside");
var $head = $("head");
var $title = $("title");
$.getJSON("script.php", queryObject, function(data) {
  $("#newStyle").remove(); // get rid of old specific styles
  $.each(data, function(i, row) {
    $result.load(row.html); // the database is storing a bunch of urls
    $title.text(row.title);
    if (!!row.css) { // get specific styles if they exist
      $("<link/>", {
        rel : "stylesheet",
        id : "newStyle",
        href : row.css
      }).appendTo($head);
    }
    if (!!row.js) $.getScript(row.js); // get specific scripts if they exist
  });
  var $links = $result.find("a").not(".toTop a"); // I have "back to top" things to avoid
  if ($links.length) { // better way to do this? this always returns true.
    var string = "<h2>References</h2><ul>";
    $links.each(function() {
      var $this = $(this);
      string += "<li><a href='" + $this.attr("href") + "'>" + $this.text() + "</a></li>";
    });
    string += "</ul>";
    $aside.html(string);
  }
}).fail(errorHandle); // ain't no scrub... probably am scrub

这导致在触发$.getJSON()的事件之前，在页面中填充的锚点（符合描述）的旁边以及随后的DOM更新。试图在JSFiddle中重新创建问题，但它与.load()没有关系。

有没有办法可以确保$links成为一个充满新鲜锚点的对象？

Answer 1

正如@Rhumborl所指出的，问题是$.load()的异步性。它有点粗略，因为我想要列出的东西以及从2个数据库查询构建JSON的方式只是不太好。这是有效的功能：

function anchorSelf() {
$.getJSON("/php/loadsop.php", {"query" : $(this).attr("value")}, function(data) {
    // reset CSS from current page
    $("#newStyle").remove();
    $.each(data.sop, function(i, row) {
        // build aside heading
        id = row.sopID;
        if (row.sopID < 100) id = "0" + id;
        if (row.sopID < 10) id = "0" + id;
        string = "<h1>SOP " + row.catID + id;
        if (!!row.suffix) string += row.suffix;
        if (!!row.revision) string += " rev " + row.revision;
        string += "</h1><h2>" + row.category + "</h2>";
        $title.text(row.shortTitle);
        if (!!row.css) {
            $("<link/>", {
                rel : "stylesheet",
                id : "newStyle",
                href : row.css
            }).appendTo($head);
        }
        if (!!row.js) $.getScript(row.js);
    });
    // start the list of sops in the category
    string += "<ul>";
    $.each(data.links, function(i, row) {
        string += "<li><a class='self' value='" + row.sopID + "'>" + row.shortTitle + "</a></li>";
    });
    string += "</ul>";
    $.each(data.sop, function(i, row) {
        // load the new page
        $result.load(row.html, function() {
            // find references in the new html
            var $links = $result.find("a").not(".toTop a").not("a[name]");
            if ($links.length > 0) {
                string += "<h2>References</h2><ul>";
                $links.each(function() {
                    $this = $(this);
                    if ($this.hasClass("self")) string += "<li><a class='self' value='" + $this.attr("value") + "'>" + $this.text() + "</a></li>";
                    else string += "<li><a href='" + $this.attr("href") + "'>" + $this.text() + "</a></li>";
                });
                string += "</ul>";
            }
            $aside.html(string);
        });
    });
    $aside.html(string);
}).fail(errorHandle);
$result.on("click", "a.self", anchorSelf);
$aside.off("click", "a", catQuery).on("click", "a.self", anchorSelf);
}

总之，我在$.each之后为第一个密钥添加了另一个$.each第二个密钥，以便在.load的连接位置处理string回调函数中的占位符变量将在我的侧栏中产生所需的结果。

在.load（）方法检索的HTML中发现查找元素

1 个答案: