iOS 10 Safari在DOM中不再使用<select>元素

Question

使用此链接,您可以重现该错误.

https://jsfiddle.net/pw7e2j3q/

<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中删除,则在此之后单击链接测试.您应该看到旧<select>元素弹出以供选择.

是否有一些黑客来解决这个问题？

Answer 1

我能够重现这个问题。问题是，每当您尝试在更改事件中删除选择框时，iOS10 都无法正确解除选择框的绑定。要解决此问题，您需要将代码更改事件代码放入具有某个超时值的 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>