JQuery .change() function doesn't work on mobile devices

Question

I'm trying to switch src attribute when changing the selector item. It works in different web browsers but when switching to my phone, it won't work. I tried with both latest version of Safari and Chrome on iOS 16.1.2 and I'm using jQuery 3.6.3

The code is so simple:

$('#selector').change(function() {
    model.setAttribute('src', path + $(this).val().trim()+'.glb');
});

Option 1 selected (the item should be bigger)

Option 2 selected (item should be smaller)

Also, when debugging, I got no errors and nothing out of normal.

------

Update: It seemed to be a jQuery problem, I recreated the code with vanilla JS and it worked as expected, so I left it like that.

Answer 1

It's possible that the issue is related to caching. On mobile devices, browsers may aggressively cache assets like images and 3D models to improve performance. When you change the src attribute of an element using jQuery, the browser may not realize that it needs to download a new version of the asset because it's still in the cache.

You can use the .attr() method in jQuery instead of setting the src attribute directly on the DOM element. The .attr() method takes care of cache-busting automatically.

$('#selector').change(function() {
    var src = path + $(this).val().trim() + '.glb';
    model.attr('src', src);
});