Question

我正在使用jQuery（版本3.2.1），我发现有时，由于我无法辨别的原因，jQuery无法找到jQuery创建的DOM元素。我会说这个问题每10次刷新页面大约有1次出现。在这些情况下，元素为undefined。

这是一个漫长而复杂的脚本，所以我试图将它提炼到关键部分。首先，脚本在index.html中引入，如下所示：

<body>
...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="app.js"></script>
</body>

几乎是你所期待的。这是来自app.js的相关（和缩写）代码 - 问题出现在loadItems()函数中：

function getQueryParamCat(queryParam) {
  return $('.category-item[data-query_name=' + '\'' + queryParam + '\'' + ']');
}

function loadItems(queryParam) {
    $.post('./get_items.php', {}, () => {
        const queryParamCat = getQueryParamCat(queryParam);

        if (queryParamCat[0]) {
          // Leaving out categoryClick() - it triggers a click on the relevant DOM element
          categoryClick(queryParamCat);
        } else {
          categoryClick($('category').first());
        }
    });
}

function loadCategories(callBack) {
  $.post('./get_categories.php', {}, (data) => {
    const categories = $.parseJSON(data);
    $.each(categories, (i, value) => {
      const cat = $('<category>').appendTo($('left')).html(value.name);
      cat.attr('class', 'category-item');
      cat.attr('data-query_name', value.name.toLowerCase());
      cat.mousedown(function () {
        categoryClick($(this));
      });
    });

    return callBack;
  });
}

$(document).ready(() => {
  // Leaving out getParameterByName() - just gets a string from the url
  const queryParam = getParameterByName();
  loadCategories(loadItems(queryParam));  
});

简要总结：

页面加载并调用loadCategories()。
客户端向get_categories.php发出AJAX请求，返回的数据用于创建一组<category> DOM元素。
loadItems(queryParam)作为回调调用，然后再发出一个AJAX请求以获取更多数据。
在该请求之后的回调中，我们最终想要调用categoryClick()函数，传入一个<category> DOM元素作为参数（要点击的元素＆＃39;）。这就是问题所在。

大约10次中的1次，getQueryParamCat()的结果返回r.fn.init [prevObject: r.fn.init(1)]，这使得queryParamCat[0]中条件中loadItems()的值评估为{{ 1}}。但是，在这些情况下，undefined也会评估为$('category')，这意味着r.fn.init [prevObject: r.fn.init(1)]也是$('category').first()。

这个问题似乎只会影响jQuery创建的元素 - 可以访问HTML中硬编码的任何内容，没问题。为什么jQuery无法始终如一地找到这些元素？它是否试图在成功附加之前找到这些元素？我能理解它是否一直失败，但这种不一致让我感到困惑。任何人都可以就如何使这些代码可靠地执行提出任何建议吗？

Answer 1

奇怪的语法; loadCategories期望将回调作为参数，但loadItems不会返回任何内容，因此loadCategories(loadItems(queryParam));会变为loadCategories(undefined);。

此外，return callBack;在$.post函数内部不执行任何操作;它不仅没有将值返回给外部函数的调用者，而且还运行异步。

也许你的意思是做这样的事情？

loadCategories(() => {
  loadItems(queryParam)
});

function loadCategories(callBack) {
  // ...
  $.each(categories, (i, value) => {
  // ...


  });
  callBack();

确保在loadCategories完成后调用回调。

jQuery - 无法一致地访问创建的DOM元素

1 个答案: