jQuery更改事件在PC上运行良好，但在iOS上不起作用

Question

我正在Flask上构建web应用程序，jQuery更改事件在PC上的web浏览器上运行良好，但在iOS浏览器上不起作用。

这是get_new_recipe_category.js。只要选择了类别，配方部分就会只显示合适的配方。目前，所有配方都会在iOS上显示，而不考虑任何类别的选择。

$(document).ready(function() {
var select_category = $('.new-recipe-category')
select_category.on('change', function(){
var count = $('.new-recipe').children().length
for (var i=0; i<count; i++) {
var recipe = $('.new-recipe option:eq(' + i + ')');
if (select_category.val() === recipe.attr('data-category')) {
recipe.show();
} else {
if (recipe.attr('data-category') === "0") {
recipe.show()
recipe.prop('selected',true)
} else{
recipe.hide()
}
}
}
});
} );

这是新的_event.html

<div class="form-row">
<div class="form-group col-md-6">
<label class="form-control-label" for="category_id">Category</label>
<div class="border">
<select class="new-recipe-category form-control form-control-lg" id="category_id" name="category_id">
<option value="0">---</option>
<option value="1">Chicken</option>
<option value="2">Rice</option>
<option value="3">Lamb</option>
</select>
</div>
</div>
<div class="form-group col-md-6">
<label class="form-control-label" for="recipe_id">Recipe</label>
<div class="border">
<select class="new-recipe form-control form-control-lg" id="recipe_id" name="recipe_id">
<option data-category="0" value="0">---</option>
<option data-category="1" value="1" style="display: none;">Grilled Chicken</option>
<option data-category="1" value="234" style="display: none;">Teriyaki Chicken</option>
<option data-category="2" value="2" style="display: none;">White rice</option>
<option data-category="3" value="3" style="display: none;">Grilled Lamb</option>
</select>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/static//js/get_new_recipe_category.js"></script>

你能给我什么建议吗？

Answer 1

我发现问题出在hide((和show((上，它们在移动浏览器上不起作用。所以它改为wrap(''(和unwrap((，然后现在就工作了。