更改元素类型，保留jQuery事件处理程序
有一些问题要求使用jQuery将元素更改为另一种类型，保留属性。 .replaceWith()可以解决这个问题，而这正是这个插件所使用的。 但是从DOM中删除原始元素会丢弃它的事件处理程序。 如何更换元素并将任何绑定的处理程序转移到新元素？
具体来说，我正在用替换 。 我正在使用jQuery 1.10。
我发现了另一个似乎可以回答你想要做的事情的问题
将一个元素的事件处理程序复制到另一个元素上？
他们做了以下事情
$.each($._data($('#original').get(0), 'events'), function() { // iterate registered handler of original $.each(this, function() { $('#target').bind(this.type, this.handler); }); });
访问原始元素$('#original')的$._data允许您访问它附加的事件，因此迭代每个元素允许您将相同的事件附加到新元素，在这种情况下$('#target')
尝试将event附加到$(document) ，为替换的替换元素添加唯一的class
$(document).on("change", ".toggle", function(e) { console.log(e.target.value) });
用select.toggle元素替换input.toggle元素; 将新的.toggle元素缓存为选择器; 删除input.toggle DOM元素，jQuery对象
// replace `input` element with `select` element, having same unique `class` // create cached selector of replacement `select` element, `toggled` // remove jQuery object, `DOM` element `input.toggle` var toggled = $(".toggle").replaceWith(function(i, el) { return "" }) && $(".toggle").is("input") || $("select.toggle"); $("input.toggle").remove();
$(document).on("change", ".toggle", function(e) { console.log(e.target.value) }); $(".toggle").val("input").change(); setTimeout(function() { var toggled = $(".toggle").replaceWith(function(i, el) { return "" }) && $(".toggle").is("input") || $("select.toggle"); $("input.toggle").remove(); toggled.find("option:first").val("select").change(); }, 1000);
replaceWith()方法将丢失事件，但您可以使用以下代码代替它来保留附加事件。
// using replaceWith() old.replaceWith( new ); // use detach() to keep the events old.before( new ).detach();