title: jQuery triggering button click inside table td
body: <p>I have a button inside my table tbody and tr :</p>
  
  <p>This is the code I'm trying for jquery event:</p>
  
  <p>But nothing happens... What am I doing wrong here??</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#tableProducts tbody tr td").click(function() {
    console.log(this.val());
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table id="tableProducts"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td width="3%"&gt;
          &lt;button type="button" id="btnSearch" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="@ViewBag.Products[i].Title" data-original-title="Tooltip top"&gt;
            &lt;i class="fa fa-bar-chart-o"&gt;&lt;/i&gt;
          &lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Edit: </p>
  
  <p>Here is the HTML markup of the table itself (full one):</p>
  
  <pre><code> &lt;table id="tableProducts" class="table table-striped jambo_table bulk_action"&gt;
  
                      &lt;thead&gt;
                          &lt;tr class="headings"&gt;
                              &lt;th class="column-title"&gt;&lt;/th&gt;
                              &lt;th class="column-title"&gt;Product name&lt;/th&gt;
                              &lt;th class="column-title"&gt;&lt;/th&gt;
                              &lt;th class="column-title"&gt;Sales&lt;/th&gt;
                              &lt;th class="column-title"&gt;Price&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
  
                      &lt;tbody&gt;
                          @if (ViewBag.Products != null)
                          {
                              for (int i = 0; i &lt; ViewBag.Products.Count; i++)
                              {
  
                                  &lt;tr class="even pointer"&gt;
  
                                      &lt;td width="5%"&gt;
                                          &lt;div class="image"&gt;
                                              &lt;img src="@ViewBag.Products[i].GalleryURL" /&gt;
                                          &lt;/div&gt;
                                      &lt;/td&gt;
                                      &lt;td width="80%"&gt;
                                          &lt;h3&gt;&lt;b&gt;&lt;a href="http://www.ebay.com/itm/@ViewBag.Products[i].ID" id="" target="_blank"&gt;@ViewBag.Products[i].Title&lt;/a&gt;&lt;/b&gt;&lt;/h3&gt;
                                      &lt;/td&gt;
                                      &lt;td width="3%"&gt;
                                          &lt;button type="button" id="btnSearch" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="@ViewBag.Products[i].Title" data-original-title="Tooltip top"&gt;&lt;i class="fa fa-bar-chart-o"&gt;&lt;/i&gt;&lt;/button&gt; 
                                      &lt;/td&gt;
                                      &lt;td width="4%"&gt;
                                          &lt;h3&gt;
                                              @ViewBag.Products[i].SaleNumber
                                          &lt;/h3&gt;
                                      &lt;/td&gt;
                                      &lt;td width="8%"&gt;
                                          &lt;h3&gt;
                                              $ @ViewBag.Products[i].SalePrice
                                          &lt;/h3&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              }
  
                          }
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  </code></pre>
  
  <p>Guys, I think I know where the problem is... The table isn't generated right away upon when the page is loaded. Instead, it is loaded after the POST action was made to the server and server returns HTML As result and I update the HTML like following:</p>
  
  <pre><code> $('.txtSearch').on('keypress', function (e) {
              if (e.which === 13) {
                  if ($('.txtSearch').val() == "") {
                      ShowMessage("You need to enter the search term!");
                      return;
                  }
                  else {
                      $.post("/SearchCompetitor/Index", { username: $('.txtSearch').val() }, StartLoading())
                                    .done(function (data) {
                                        if (data !== "UsernameError") {
                                            StopLoading();
                                            var brands = $('&lt;table /&gt;').append(data).find('#tableProducts').html();
                                            $('#tableProducts').html(brands);
                                            var header = $('&lt;div /&gt;').append(data).find('.bs-glyphicons').html();
                                            $('.bs-glyphicons').html(header);
                                            $('#tableProducts thead, #header').show();
                                            $('#emptyText').hide();
                                        }
                                        else {
                                            StopLoading();
                                            alert("No username was found under: " + $('.txtSearch').val());
                                        }
                                    });
                  }
              }
          });
  </code></pre>
  
  <p>I think the issue here is that I need to somehow trigger the event on the button after the DOM was loaded initially.. </p>