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

Question

With this link you can reproduce the bug.

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>

If you click on a <select> element and remove it from dom and after that you click on the link test. You should see the old <select> element pop for selection.

is there some hack to fix that ?

Answer 1

I was able to reproduce this issue. The problem is, whenever you are trying to remove the select box on its change event then iOS10 is not able to properly unbind the selectbox. To fix this you need to put your code change event code inside a setTimeout with some timeout value. It is not working with zero timeout value.

http://jsfiddle.net/n62e07ef/

Below is a fix for your code:

<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>