JavaScript 元素创建差异导致 jquery.ui.autocomplete 元素未定义错误

Question

我正在尝试动态创建一个输入元素并在将其添加到 DOM 之前为其附加一个 jquery.ui 自动完成控件。我通常创建动态元素的方式似乎是创建 Cannot read property 'element' of undefined 错误，我不知道为什么。

$(document).ready(() => {
  const content = document.getElementById('content');
  const input = document.createElement('input');
  const inputFromTemplate = createFromTemplate(`<input></input>`);

  console.log(input);
  console.log(inputFromTemplate);

  $(input).autocomplete({
    source: ['one', 'two', 'three']
  });

  $(inputFromTemplate).autocomplete({
    source: ['one', 'two', 'three']
  });

  content.append(input);
  content.append(inputFromTemplate);
});

function createFromTemplate(template) {
  const htmlTemplate = document.createElement('template');
  htmlTemplate.innerHTML = template;

  return htmlTemplate.content.firstElementChild.cloneNode(true);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="content"></div>

在上面的代码示例中，当我使用document.createElement('input') 方法创建input 元素时，自动完成控件会毫无问题地附加。

当我使用自己的createFromTemplate 方法创建input 元素时，会引发上述错误。

注销到控制台时，这两个元素看起来相同，但似乎在console.log 触发之前附加了自动完成控件（您可以通过按原样运行，然后注释掉.autocomplete 代码行来查看这一点并查看登录到控制台的input 代码的差异）。

我认为我对 jquery 如何将控件附加到元素的理解是有缺陷的，因为我不明白为什么两者之间会有差异。

(注意：是的，这是一个简单的复制，我想使用像 createFromTemplate 这样的函数的原因是因为实际输入是更大的 html 模板的一部分，所以将 document.createElement 方法链接在一起是行不通的发生）。

编辑： 只是为了解决当元素首先附加到 DOM 时它工作的问题，不幸的是，在我正在处理的项目的情况下，这不是一个选项。 Something akin to this issue was reported and fixed in a previous version of jquery.ui back in 2012，所以很可能是库的错误

Answer 1

我建议快速阅读：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

DocumentFragment 不是各种事件的有效目标，因此通常最好克隆或引用其中的元素。

HTML

<div id="container"></div>

<template id="template">
  <div>Click me</div>
</template>

JavaScript

const container = document.getElementById("container");
const template = document.getElementById("template");

function clickHandler(event) {
  alert("Clicked a div");
}

const firstClone = template.content.cloneNode(true);
firstClone.addEventListener("click", clickHandler);
container.appendChild(firstClone);

const secondClone = template.content.firstElementChild.cloneNode(true);
secondClone.addEventListener("click", clickHandler);
container.appendChild(secondClone);

结果

firstClone 是一个 DocumentFragment 实例，因此当它按预期附加到容器中时，单击它不会触发单击事件。 secondClone 是一个 HTMLDivElement 实例，点击它可以正常工作。

尝试初始化自动完成时，事件绑定将失败。这可能就是为什么您会看到各种不同的错误以及其他元素正常工作而 template 中的元素不工作的原因。

所以让我们按照他们的建议、您尝试的方式以及其他一些可能的解决方案进行测试。

$(document).ready(() => {
  const content = document.getElementById('content');
  var inA = document.createElement('input');
  var inB = createTempObj("<input>");
  var inC = createFromTemplate("<input>");
  var inD = document.getElementById("template").content.firstElementChild.cloneNode(true);
  var m1 = menuFromTemp();

  console.log("Init Autocomplete 1");
  console.log("HTML", inA);

  initAutoComplete(inA);

  console.log("Init Autocomplete 2");
  console.log("HTML", inB);

  initAutoComplete(inB);

  console.log("Init Autocomplete 3");
  console.log("HTML", typeof inC, inC);
  
  initAutoComplete(inC);

  console.log("Init Autocomplete 4");
  console.log("HTML", inD);

  //initAutoComplete(inD);

  console.log("Init Menu 1");
  console.log("HTML", m1);
  var menu = $(m1).menu({
    role: null
  }).hide().menu("instance");

  content.append(inA);
  content.append(inB);
  content.append(inC);
  content.append(inD);
  content.append(m1);
});

function createFromTemplate(item) {
  var base = document.createElement('template');
  var real = document.createElement('input');
  console.log("item:", typeof item, item);
  console.log("real:", typeof real, real);
  base.innerHTML = item;
  var clone = base.content.children[0].cloneNode(true);
  console.log("clone:", typeof clone, clone);
  return clone;
};

function createTempObj(el) {
  var base = $("<template>");
  $(el).appendTo(base);
  return base.children(0).clone("true")[0];
}

function initAutoComplete(el) {
  $(el).autocomplete({
    source: ['one', 'two', 'three']
  });
}

function menuFromTemp() {
  var base = document.createElement('template');
  base.innerHTML = "<ul><li><div>Books</div></li><li><div>Clothing</div></li> <li><div>Electronics</div></li></ul>";
  var menu = base.content.children[0].cloneNode("true");
  return menu;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="content"></div>
<hr />
<template id="template">
  <input>
</template>

输入 C 和 D 初始化失败。我把它们注释掉了，但你可以自己测试一下。根据文档，它们应该按预期工作。如果您想进一步深入研究，我敢打赌那里有答案。如果您想完成工作，请不要在这部分使用 template。

不清楚您为什么要尝试动态创建template，为什么不根据JavaScript 的需要动态创建input 元素。

Answer 2

如果您创建 div 元素而不是 template 元素，它会起作用。

$(document).ready(() => {
  const content = document.getElementById('content');
  const input = document.createElement('input');
  const inputFromTemplate = createFromTemplate(`<input></input>`);

  console.log(input);
  console.log(inputFromTemplate);

  $(input).autocomplete({
    source: ['one', 'two', 'three']
  });

  $(inputFromTemplate).autocomplete({
    source: ['one', 'two', 'three']
  });

  content.append(input);
  content.append(inputFromTemplate);
});

function createFromTemplate(template) {
  const htmlTemplate = document.createElement('div');
  htmlTemplate.innerHTML = template;

  return htmlTemplate.firstElementChild.cloneNode(true);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="content"></div>