Gravity Forms - jQuery code only works on Desktop and Tablet but not Mobile

Question

I found the below code from this question.

The code works great in Chrome, Firefox and Safari on desktop and tablet but does not work on mobile. I'm trying on an iPhone with Chrome and Safari but no dice. Any ideas why it wouldn't work?

jQuery(document).ready(function($) { 
     $("#input_54_11").change(function() {
          var property_state = jQuery(this).val();
          if (property_state == 'Georgia') { // get the selected state
            jQuery("#input_54_68 option[value='Condominium']").hide();//replace with your value
          }else{
            jQuery("#input_54_68").children().show()
          };
     });
});

Answer 1

it sounds like jquery not loading you can add a test for that and add a fallback like so:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-3.6.0.min.js"></script>')</script>

you need to swap the

js/jquery-3.6.0.min.js

to be the minified version of jquery that you have in the shipped solution source files, if your using require then

requirejs.config({
  enforceDefine: true,
  paths: {
    jquery: [
      'https://code.jquery.com/jquery-3.6.0.min.js',
      //If the CDN location fails, load from this location
      'js/jquery-3.6.0.min.js'
    ]
  }
});

//Later
require(['jquery'], function ($) {});

also, try adding CDATA tags

<script type="text/javascript">
<![CDATA[
// content of your Javascript goes here
]]>
</script>

I hoe this helps