javascript cloneNode()无法正常工作

Question

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

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

它可以工作，这意味着每次我在下拉列表中更改所选值时，函数f()都会被调用。

我想在页面中的另一个地方克隆这个选择。我有这样的代码：

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

当我在新的下拉列表中更改所选值时，函数f()不会被调用。

我尝试使用chrome的devTools对其进行调试，发现$("#a")是一个数组长度为1的数组，它首先包含select本身。但是$("#b")没有包含select本身的"0“属性。

有人知道为什么会这样吗？如何克隆带有所有选项和回调的select元素？

Answer 1

尽管您克隆了现有的#a，但是还没有在前面显示的代码中将其插入到文档中，因此$("#b")不会返回任何元素。在使用$选择它之前插入它，例如：

$(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>

​