jQuery triggering button click inside table td

Question

I have a button inside my table tbody and tr :

This is the code I'm trying for jquery event:

But nothing happens... What am I doing wrong here??

$("#tableProducts tbody tr td").click(function() {
  console.log(this.val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="tableProducts">
  <tbody>
    <tr>
      <td width="3%">
        <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">
          <i class="fa fa-bar-chart-o"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>

Edit:

Here is the HTML markup of the table itself (full one):

 <table id="tableProducts" class="table table-striped jambo_table bulk_action">

                    <thead>
                        <tr class="headings">
                            <th class="column-title"></th>
                            <th class="column-title">Product name</th>
                            <th class="column-title"></th>
                            <th class="column-title">Sales</th>
                            <th class="column-title">Price</th>
                        </tr>
                    </thead>

                    <tbody>
                        @if (ViewBag.Products != null)
                        {
                            for (int i = 0; i < ViewBag.Products.Count; i++)
                            {

                                <tr class="even pointer">

                                    <td width="5%">
                                        <div class="image">
                                            <img src="@ViewBag.Products[i].GalleryURL" />
                                        </div>
                                    </td>
                                    <td width="80%">
                                        <h3><b><a href="http://www.ebay.com/itm/@ViewBag.Products[i].ID" id="" target="_blank">@ViewBag.Products[i].Title</a></b></h3>
                                    </td>
                                    <td width="3%">
                                        <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"><i class="fa fa-bar-chart-o"></i></button> 
                                    </td>
                                    <td width="4%">
                                        <h3>
                                            @ViewBag.Products[i].SaleNumber
                                        </h3>
                                    </td>
                                    <td width="8%">
                                        <h3>
                                            $ @ViewBag.Products[i].SalePrice
                                        </h3>
                                    </td>
                                </tr>
                            }

                        }
                    </tbody>
                </table>

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:

 $('.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 = $('<table />').append(data).find('#tableProducts').html();
                                          $('#tableProducts').html(brands);
                                          var header = $('<div />').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());
                                      }
                                  });
                }
            }
        });

I think the issue here is that I need to somehow trigger the event on the button after the DOM was loaded initially..

Answer 1

There is no such thing as val() on a cell

If the button ID is unique as it should be, just do this:

$("#btnSearch").click(function() { // using the unique ID of the button
  console.log($(this).val());
});

If the button is inserted after load, then you need to delegate. Here is code to click any button in a cell in the table when the complete table is dynamically inserted

$(document).on("click","#tableProducts tbody tr td button.btn", function() { // any button
  console.log($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table id="tableProducts" class="table table-striped jambo_table bulk_action">

  <thead>
    <tr class="headings">
      <th class="column-title"></th>
      <th class="column-title">Product name</th>
      <th class="column-title"></th>
      <th class="column-title">Sales</th>
      <th class="column-title">Price</th>
    </tr>
  </thead>

  <tbody>

    <tr class="even pointer">

      <td width="5%">
        <div class="image">
          <img src="@ViewBag.Products[i].GalleryURL" />
        </div>
      </td>
      <td width="80%">
        <h3><b><a href="http://www.ebay.com/itm/@ViewBag.Products[i].ID" id="" target="_blank">@ViewBag.Products[i].Title</a></b></h3>
      </td>
      <td width="3%">
        <button type="button" id="btnSearch" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="@ViewBag.Products[i].Title 1" data-original-title="Tooltip top"><i class="fa fa-bar-chart-o"></i>
        </button>
      </td>
      <td width="4%">
        <h3>
                                            @ViewBag.Products[i].SaleNumber
                                        </h3>
      </td>
      <td width="8%">
        <h3>
                                            $ @ViewBag.Products[i].SalePrice
                                        </h3>
      </td>
    </tr>
    <tr class="even pointer">

      <td width="5%">
        <div class="image">
          <img src="@ViewBag.Products[i].GalleryURL" />
        </div>
      </td>
      <td width="80%">
        <h3><b><a href="http://www.ebay.com/itm/@ViewBag.Products[i].ID" id="" target="_blank">@ViewBag.Products[i].Title</a></b></h3>
      </td>
      <td width="3%">
        <button type="button" id="btnSearch" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="@ViewBag.Products[i].Title 2" data-original-title="Tooltip top"><i class="fa fa-bar-chart-o"></i>
        </button>
      </td>
      <td width="4%">
        <h3>
                                            @ViewBag.Products[i].SaleNumber
                                        </h3>
      </td>
      <td width="8%">
        <h3>
                                            $ @ViewBag.Products[i].SalePrice
                                        </h3>
      </td>
    </tr>
  </tbody>
</table>

NOTE: If the container with the ID tableProducts is static, you can do

$("#tableProducts").on("click","button.btn",

Answer 2

Try this

 <script>

 $("#tableProducts tbody tr td button").click(function () {
  console.log($(this).val());
 });

 </script>