iOS DOM 中不再有 <select> 元素的 10 Safari 问题

Question

有了这个 link 你可以重现这个错误。

<script>
$( "#test" ).change(function() {
  $("#test").remove();
  var combo = $("<select></select>").attr("id", "test2").attr("name", "test");
  combo.append("<option>New One</option>");
  $("#App").append(combo);
});

$("#click").click(function(){
  $("#App").remove();
})
</script>

如果您单击 <select> 元素并将其从 dom 中删除，然后单击 link 测试。您应该会看到旧的 <select> 元素弹出以供选择。

是否有一些技巧可以解决这个问题？

Answer 1

我能够重现这个问题。问题是，每当您尝试在其更改事件中删除 select 框时，iOS10 将无法正确解除绑定 select 框。要解决此问题，您需要将代码更改事件代码放在具有一些超时值的 setTimeout 中。它不适用于零超时值。

http://jsfiddle.net/n62e07ef/

下面是对您的代码的修正：

<script>
$( "#test" ).change(function() {
  setTimeout( function() {
    $("#test").remove();
    var combo = $("<select></select>").attr("id", "test2").attr("name", "test");
    combo.append("<option>New One</option>");
    $("#App").append(combo);
  }, 50);
});

$("#click").click(function(){
  $("#App").remove();
})
</script>

Answer 2

一个简单的解决方案是稍微更改代码，这样就不会重新生成整个 select 元素，而只生成其中的选项元素。

Answer 3

我今天偶然发现了这个错误。就像 Gautam 在他的回答中说的那样，事件不会在它删除的元素之前解除绑定。我的解决方案，blur the element before removing it.

 $("#test").blur().remove();

iOS DOM 中不再有 <select> 元素的 10 Safari 问题

iOS 10 Safari Issue with <select> element no more in DOM

safari

ios10