title: How do I select and click using jQuery
body: <pre><code>&lt;div id="subNav-Requests" class="suit-sub-nav" style=""&gt;
    &lt;ul class="page-container"&gt;
      &lt;li&gt;
      &lt;a class="navLink0" href="/MyApp/reporting/list/data.do"&gt;
          &lt;span&gt;Report Data&lt;/span&gt;
      &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a code like this. I am trying to simulate a click on <code>'Report Data'</code>. What I am trying is </p>
  
  <pre><code>var nav = 'div#subNav-' + mainNavId; //results in 'div#subNav-Requests'
  $(nav+' a.navLink0').trigger('click'); 
  </code></pre>
  
  <p>No errors, nothing happens. I also tried this</p>
  
  <pre><code>$('a.navLink0').trigger('click'); 
  </code></pre>
  
  <p>to the same effect. I have to select the <code>subNav-Requests</code> because there are many more like that, for E.g. <code>subNav-Reports</code>, <code>subNav-Allergies</code> etc. with the same structure but with many <code>navLinks</code> inside.</p>