在 .load(） 方法检索的 HTML 中查找元素时出现问题

Issue finding elements in HTML retrieved by .load() method

本文关键字：元素 查找 问题 HTML load 方法 检索      更新时间：2023-09-26

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

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

相关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将是一个充满新鲜锚点的对象？

正如@Rhumborl所指出的，问题是$.load()的异步性。它变得有点粗糙，因为我希望列出内容的顺序以及 JSON 从 2 个数据库查询构建的方式不太好。这是有效的函数：

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，以便在回调函数中string占位符变量的连接将在侧边栏中产生所需结果的位置处理.load。

相关文章：