title: How to enable jQuery click events in Android WebView
body: <p>I have seen many similar questions which did not help me, hence this question.</p>
  
  <p>I have a website that uses jQuery.
  I am building an android app with webview, that opens the website. While the webview opens the website, the problem I have is the webview doesn't recognize any click events of the website. Here is the code for setting up the webview.</p>
  
  <pre><code>@Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
  
      myWebView = (WebView) findViewById(R.id.webview);
      WebSettings webSettings = myWebView.getSettings();
      webSettings.setJavaScriptEnabled(true);
      myWebView.setClickable(true);
      myWebView.setWebChromeClient(new WebChromeClient());
  
      String localWebsite = "http://10.0.2.2:5000/test.html";
      myWebView.loadUrl(localWebsite);
  
  }
  </code></pre>
  
  <p>The below is the code on my test website:</p>
  
  <p>How can I enable click events? </p>
  
  <p>This part <code>$('.symptomImage').on('click ', function () {  $('#symptomsDiv').css("display","none"); });</code> doesn't work !! </p>
  
  <pre><code>&lt;script&gt;
  
  function test() { 
     $(document.body).prepend('Hello World'); // This Works
     $('#status').text("DidNotClick!!")       // This Works
  
    $('.symptomImage').on('click ', function () { // This doesn't work
        $('#symptomsDiv').css("display","none");
    });
  }
  
  test();
  
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML code of the website</p>
  
  <pre><code>&lt;div id="symptomsDiv" class="text-center"&gt;
              &lt;div class="symptomImage" style="display: inline-block !important"&gt;
                   &lt;img src="images/symptoms/cold.png" class="img-rounded symptomImg center-block" alt="..."&gt;
              &lt;/div&gt;
              &lt;div class="symptomImage" style="display: inline-block !important"&gt;
                  &lt;img src="images/symptoms/cough.png" class="img-rounded symptomImg center-block" alt="..."&gt;
              &lt;/div&gt;
              &lt;div class="symptomImage" style="display: inline-block !important"&gt;
                  &lt;img src="images/symptoms/fever.png" class="img-rounded symptomImg center-block" alt="..."&gt;
              &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>