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 ?
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>
一个简单的解决方案是改变代码，所以不要重新生成整个选择元素，而只是选择元素内部。
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();
上一篇: 从git空白检查中排除Jest快照