[英]javascript cloneNode() doesn't work properly
我在一个 html 页面中有一个带有 id="a" 的选择元素(例如)。 我有一个名为 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 的数组,它首先具有选择本身。 但是 $("#b") 没有包含选择本身的“0”属性。
有谁知道为什么会这样? 如何克隆带有所有选项和回调的 select 元素?
尽管您克隆了现有的#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.