CODEWITHSUNDEEP
safariios10
atorgfr
atorgfr

Reputation: 161

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

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 ?

Upvotes: 7

Views: 1815

Answers (3)

Razz
Razz

Reputation: 4005

I've stumbled upon this bug today. It's like Gautam says in his answer that the event wont unbind before the element it removed. My solution, blur the element before removing it.

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

Upvotes: 0

JuLy
JuLy

Reputation: 493

One easy solution would be change the code a bit so don't re-generate the whole select-element, but just the option-elements inside.

Upvotes: 0

Gautam Chadha
Gautam Chadha

Reputation: 306

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>

Upvotes: 4

Related Questions