javascript cloneNode() 无法正常工作

Question

我在 html 页面中有一个带有 id="a" 的 select 元素（例如）。我有一个名为 f() 的函数。当我写

$("#a").on("change",f);

有效，这意味着每次我更改下拉列表中的 selected 值时，都会调用函数 f()。

我想将这个 select 克隆到页面的另一个地方。我有这个代码：

var oldSelect=$("#a")
var newSelect=oldSelect[0].cloneNode(true);
newSelect.id="b";
$("#b").on("change",f);

当我更改新下拉列表中的 selected 值时，函数 f() 未被调用。

我尝试使用 chrome 的 devTools 调试它，它似乎 $("#a") 是一种长度为 1 的数组，它首先具有 select 本身.但是 $("#b") 没有包含 select 本身的“0”属性。

有谁知道为什么会这样？如何克隆 select 元素及其所有选项和回调？

Answer 1

虽然您克隆了现有的 #a，但您还没有将它插入文档中的代码中，因此 $("#b") 不会给您 [=35] 中的任何元素=].在使用 $ 选择它之前插入它，例如：

$(container).append(newSelect);
$("#b").on("change",f);

其中 container 是您要将新 <select> 附加到的元素。

或者直接将侦听器添加到元素，而不是再次选择它：

var newSelect=oldSelect.clone(true);
newSelect
  .prop('id', 'b')
  .on("change",f)
  .appendTo(container);

（请注意，在上面，newSelect 是一个 jQuery 集合，而不是 HTMLSelectElement。）

const f = () => console.log('change');

var oldSelect = $("#a");
oldSelect.on("change",f);

var newSelect = oldSelect.clone(true);
newSelect
  .prop('id', 'b')
  .on("change", f)
  .appendTo('#container');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <select id="a">
    <option>Option A</option>
    <option>Option B</option>
  </select>
</div>

javascript cloneNode() 无法正常工作

javascript cloneNode() doesn't work properly

javascript

jquery

html

clonenode

jquery-clone