title: Javascript click event not working in Google Chrome?
body: <p>I have a search function in which the user selects a date range, and search box if desired, and it loads the query results dynamically into an HTML div element. When the results are displayed, there is a selection box to select a field to sort by. When the user selects a field, it triggers another AJAX request which "dynamically reloads" the page into the div element again, sorting the results by the selected field. The method I am currently using works just fine under Mozilla Firefox, but does not work under Google Chrome.</p>
  
  <p>Here is the JS file that handles the AJAX request: </p>
  
  <pre><code>/*========================================================
      sendServiceRequest.js: handles ajax request for
      dynamically loading data
  */
  function sendServiceRequest(file, nvpSendData, successCallback, failCallback) {
      $.ajax({
          type: "POST",
          url: file,
          data: nvpSendData,
          dataType: 'html'
      }).success(function(data, status) {
          console.log(".done");
          console.log("Return AJAX status: " + status);
          //console.log("success data: " + JSON.stringify(data));
          successCallback(data, status);
      }).fail(function(data, status, error) {
          console.log(".fail");
          console.log("Return AJAX status: " + status);
          //console.log("Return data: " + JSON.stringify(data));
          failCallback(data, status, error);
      });
  }
  
  
  function sendSortServiceRequest(searchType, fromDate, toDate, searchString, column, order) {
      sendServiceRequest(
          "/search/get_content.php",
          {action:"sort", search_type:searchType, from_date:fromDate, to_date:toDate, search_str:searchString, col:column, order:order},
          function(data, status) {
              $('#results-container').html(data);
          },
          function(data, status, error) {
            console.log(".fail");
            console.log("Return AJAX status: "+status);
          }
      );
  }
  </code></pre>
  
  <p>The first function, <em>sendServiceRequest()</em>, is what initially loads the search results into the div element. </p>
  
  <p>And here is a fragment of the code that is dynamically loaded into a div element, the selection element that triggers an event upon clicking on an option: </p>
  
  <pre><code>&lt;div class="col-sm-9" align="right"&gt;
                  &lt;label for="charge_auth_sort_select"&gt;Sort By:&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-3" style="padding:0;margin:0;"&gt;
                  &lt;select class="sort_select" id="charge_auth_sort_select" style="width:100%; padding:0; margin:0;"&gt;
                  &lt;!-- selection options with datasets for identifying column and order for sorting --&gt;
                      &lt;option onClick="sendSortServiceRequest('charge-auth', '&lt;?php echo $fromDate; ?&gt;', '&lt;?php echo $toDate; ?&gt;', '&lt;?php echo $searchString; ?&gt;', 0, '&lt;?php echo $sortArgs[0]['order']; ?&gt;')"&gt;
                          Status
                      &lt;/option&gt;
                      &lt;option onClick="sendSortServiceRequest('charge-auth', '&lt;?php echo $fromDate; ?&gt;', '&lt;?php echo $toDate; ?&gt;', '&lt;?php echo $searchString; ?&gt;', 1, '&lt;?php echo $sortArgs[1]['order']; ?&gt;')"&gt;
                          Order ID
                      &lt;/option&gt;
                      &lt;option onClick="sendSortServiceRequest('charge-auth', '&lt;?php echo $fromDate; ?&gt;', '&lt;?php echo $toDate; ?&gt;', '&lt;?php echo $searchString; ?&gt;', 2, '&lt;?php echo $sortArgs[2]['order']; ?&gt;')"&gt;
                          User ID
                      &lt;/option&gt;
                      &lt;option onClick="sendSortServiceRequest('charge-auth', '&lt;?php echo $fromDate; ?&gt;', '&lt;?php echo $toDate; ?&gt;', '&lt;?php echo $searchString; ?&gt;', 3, '&lt;?php echo $sortArgs[3]['order']; ?&gt;')"&gt;
                          Order Date
                      &lt;/option
                      &lt;option onClick="sendSortServiceRequest('charge-auth', '&lt;?php echo $fromDate; ?&gt;', '&lt;?php echo $toDate; ?&gt;', '&lt;?php echo $searchString; ?&gt;', 4, '&lt;?php echo $sortArgs[4]['order']; ?&gt;')"&gt;
                          Last Updated
                      &lt;/option&gt;
                      &lt;option onClick="sendSortServiceRequest('charge-auth', '&lt;?php echo $fromDate; ?&gt;', '&lt;?php echo $toDate; ?&gt;', '&lt;?php echo $searchString; ?&gt;', 5, '&lt;?php echo $sortArgs[5]['order']; ?&gt;')"&gt;
                          Insurance Type
                      &lt;/option&gt;
                      &lt;option onClick="sendSortServiceRequest('charge-auth', '&lt;?php echo $fromDate; ?&gt;', '&lt;?php echo $toDate; ?&gt;', '&lt;?php echo $searchString; ?&gt;', 6, '&lt;?php echo $sortArgs[6]['order']; ?&gt;')"&gt;
                          Delivery Method
                      &lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>So after the results are loaded into the div element of the 'parent' page, the user can select a field option from the selection list. When the user clicks the option, it should trigger the <em>sendSortServiceRequest()</em> function, reloading the results into the element, sorted by the selected field. </p>
  
  <p>Again, this works just fine under Firefox, but does not want to work under Chrome. I've been stuck on this for quite a while now. Any help would be greatly appreciated. </p>