更改元素类型，保留 jQuery 个事件处理程序

Question

有几个问题询问如何使用 jQuery 将元素更改为另一种类型，保留属性。 .replaceWith() 可以解决问题，这就是 this plugin 所使用的。但是从 DOM 中删除原始元素会同时删除它的事件处理程序。如何替换元素并将任何绑定的处理程序转移到新元素？

具体来说，我将 <input type="text"> 替换为 <select>。我正在使用 jQuery 1.10.

Answer 1

replaceWith() 方法会丢失事件，但是您可以使用以下代码代替它来保留附加事件。

// using replaceWith()
old.replaceWith( new );

// use detach() to keep the events
old.before( new ).detach();

Answer 2

尝试将 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 "<select class=toggle name=toggle>"
                         + "<option value=null>1</option>"
                         + "<option value=2>2</option>"
                         + "</select>"
                  }) && $(".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 "<select class=toggle name=toggle><option value=null>1</option><option value=2>2</option></select>"
}) && $(".toggle").is("input") || $("select.toggle");
  $("input.toggle").remove();
  toggled.find("option:first").val("select").change();
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input class="toggle" name="toggle" type="text" value="" />

Answer 3

我发现另一个问题似乎可以回答您的问题

Duplicate one element's event handlers onto another?

他们做了以下事情

$.each($._data($('#original').get(0), 'events'), function() {
  // iterate registered handler of original
  $.each(this, function() {
    $('#target').bind(this.type, this.handler);
  });
});

访问原始元素 $('#original') 的 $._data 允许您访问它附加的事件，因此迭代每个事件允许您将相同的事件附加到新元素，在这种情况下 $('#target')

更改元素类型，保留 jQuery 个事件处理程序

Change element type, preserving jQuery event handlers

jquery

events