Question

有一些问题要求使用jQuery将元素更改为另一种类型，保留属性。 .replaceWith()可以解决问题，this plugin使用的是<input type="text">。但是从DOM中删除原始元素会丢弃它的事件处理程序。如何更换元素并将任何绑定的处理程序转移到新元素？

具体来说，我将<select>替换为{{1}}。我使用的是jQuery 1.10。

Answer 1

尝试将event附加到$(document)，为替换的替换元素添加唯一class

$(document).on("change", ".toggle", function(e) {
  console.log(e.target.value)
});

将input.toggle元素替换为select.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 2

我发现了另一个问题似乎回答了你想要做的事情

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);
  });
});

访问原始元素$._data的{{1}}可以让您访问它附加的事件，因此迭代每个元素允许您将相同的事件附加到新元素，在此案例$('#original')

Answer 3

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

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

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

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

3 个答案: