title: jQuery Click - Doesn't work when page 1st loaded, but works if page is reloaded
body: <p>I have an issue with the jQuery click function.  I am trying to integrate jQuery Mobile Autocomplete into an C# MVC application.</p>
  
  <p>It the following code doesn't work when the page first loads.  However, it works if I reload/refresh the page.</p>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;ul data-role="listview"  class="selectitems" data-filter="true"  data-inset="true" data-filter-reveal="true" data-filter-placeholder="Search Ingredients..."&gt;
              @foreach (var i in Model.ingredientList){
                  &lt;li data-id="@i.id" data-unit="@i.useUnit.symbol"&gt;&lt;a href="#" class="ui-screen-hidden"&gt;@i.title&lt;/a&gt;&lt;/li&gt;
              }
          &lt;/ul&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>    &lt;script src="/Scripts/jquery-1.9.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/jquery.mobile-1.3.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
      $(document).ready(function () {
          $('.selectitems &gt; li').on('click', function () {
              $('input[data-type="search"]').val($(this).text());
              $("ul:jqmData(role='listview')").children().addClass('ui-screen-hidden');
              $('#hdnIngredientID').val($(this).data('id'));
              $('#txtUseQtyDetails').val($(this).data('unit'));
              $('#hdnIngredientTitle').val($(this).text());
              $('#txtQty').focus();
          });
  
          $('.ui-input-clear').on('tap', function () {
              $('#hdnIngredientID').val('');
              $('#txtUseQtyDetails').val('');
          });
      });
  </code></pre>
  
  <p>Any assistance would be appreciated.</p>
  
  <p>UPDATE:</p>
  
  <p>jQuery-mobile autocomplete hides the list items until user input happens using CSS "display: none;".  Would this prevent the click function from being assigned?  If so, how do I work around this?</p>
  
  <p>FURTHER UPDATE:</p>
  
  <p>Found that the "live" function is depreciated.  Changed it to "on" instead.  Unfortunately this didn't fix the problem :-(</p>
  
  <p>Could it be because the "li" items are hidden by CSS when the page is loaded?</p>
  
  <p>I've deployed it here: </p>
  
  <p><a href="http://rar_mobile_dev.runarestaurant.com/Ingredient/Create?recipe_id=15240">http://rar_mobile_dev.runarestaurant.com/Ingredient/Create?recipe_id=15240</a> </p>
  
  <p>(username: test, password: test)</p>