title: JQuery selector activating in the wrong control in ASP.NET webforms
body: <p>So in this master pages site, i have included the below in the masterpage to enable datapicker in all textboxes containing the word "Date" in their id</p>
  
  
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" /&gt;
  
  &lt;script type="text/javascript"&gt;
  
      function pageLoad(sender, args) {
          $(document).ready(function () {
  
  
              $("[id*='Date']").datepicker({
                  showOn: 'button',
                  buttonImageOnly: true,
                  buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif'
              });
              $("[id*='Date']").click(function () {
                  $("[id*='Date']").datepicker('show');
              });
          });
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This woks fine on pages with just one such textbox. But on pages with multiple datetime textboxes (txtStartDate and txtCompletionDate), if you click on the first one, the second one gets focused and subsequently receives the value selected from the calendar popup. This issue does not happen if i click on the calendar icon next to the textbox or if i select the second textbox. This issue doesnt happen either if i specifically declare the full name of the textbox ID's in the selector.</p>