- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 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 的数组,它首先具有选择本身。但是 $("#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>
关于javascript cloneNode() 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60613582/
我正在为 gmail 开发一个 greasemonkey 脚本,我需要在其中复制“收件箱”链接。使用 cloneNode 工作正常,但我认为有一个 onclick 事件在运行时附加到它。所以,这是一个
是否有一种快速方法来“ super ”深度克隆节点(包括其属性)? (我猜还有方法) 我有这样的东西: var theSource = document.getElementById("someDiv
我在 html 页面中有一个 id="a"的 select 元素(例如)。我有一个名为 f() 的函数。当我写作时 $("#a").on("change",f); 它有效,这意味着每次我更改下拉列表中
这个问题在这里已经有了答案: What do querySelectorAll and getElementsBy* methods return? (12 个答案) 关闭 4 年前。 我有几个跨度
我需要更改图片位置(将 1 img 放在 2 img 所在的位置,反之亦然),为此我尝试将 cloneNode 设置为第二个 img,但相反,它只是给我 [object HTMLImageElemen
我需要在单击“添加”按钮时克隆某个 div。为此,我使用以下代码:- function addDetails() { var details=document.getElementBy
我一直在使用 cloneNode在 Firefox 中,它工作正常。但在 Chrome 中,它并没有像我预期的那样工作。 cloneNode方法会克隆节点,但如果节点是文件 ( ),它不会克隆节点的
我对 jQuery $.clone 和原始 .cloneNode 属性之间的区别有点困惑。 如果我这样做 $('blah').cloneNode(true) 这将在 jQuery 空间之外创建一个全局
这个问题已经有答案了: Deleting Objects in JavaScript (14 个回答) 已关闭 6 年前。 我的情况是,我必须克隆一个元素,读取它的属性和其他解析功能,但现在因为我不这
也许我已经盯着这个太久了。我正在尝试为数据集中的每个项目复制一个节点(一组 HTML)。然后对于每个节点,将 node.children.children 的值更改为数据集中的相应值。 这是JSfid
我的代码在 IE 中完美运行,但在 safari 中不起作用。Clonenode() 方法在 safari 中不起作用。我有这样的代码 function ApplyNowWizard_addVehic
我有 2 个表,我想通过一个按钮将内容从 tb_new 克隆到 tb_made: var tab = document.getElementById('tb_new'); var clone=tab.
我在一些代码示例中注意到克隆 DOM 节点并将其附加到现有元素的看似不同的方法: element.appendChild(something.cloneNode(true)); element.app
我无法理解何时对对象的数据分配是引用以及何时创建该对象的副本。我以为我明白了,但下面的例子不符合我对它的简单理解。 事件处理程序开始执行以下一系列步骤。 Promise.allSettled( [ g
如何克隆Node,然后转换该nodeName,因为我想要深入复制属性和子节点( https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneN
我正在尝试使用 Node.cloneNode() 在 header 中克隆一个模板没有成功。这是我的标记 var header = document.querySelector("header"),
这与问题 javascript cloneNode and properties 有关. 我看到了相同的行为。 Node.cloneNode 不会复制我自己添加的任何属性(来自原始帖子的代码):
我在这里摆弄这段 JavaScript 代码 http://jsfiddle.net/7Sd4W/4/ 我试图让它克隆 ID =“sel0”的选择元素 然后,当它克隆它时,我希望它创建相同的选择元素,
我有一段这样的代码—— var x,m,cloneNodex; function addVtier() { m.appendChild(cloneNodex)
下面的 JavaScript 在 Internet Explorer 中运行良好,但在 FireFox 中不起作用。 它卡在“NewField is undefined”处,这就是行: for (va
我是一名优秀的程序员,十分优秀!