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..

mplungjan · Accepted Answer · 2018-10-31 08:09:12Z

7

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",

edited Oct 31, 2018 at 8:09

answered Nov 12, 2016 at 11:13

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mplungjan Over a year ago

Yes they did if you have the above HTML as you can see when you run them here. If you do NOT have a unique button ID then the example will not work in your code for more than one cell

User987 Over a year ago

@mplugjan I've edited my question with the table HTML, can you look into it ?

User987 Over a year ago

I tried both of the solutions, none triggers the event for some reason....

User987 Over a year ago

OH I FORGOT!! This table is generated after the post action was made to server, then the server returns the entire HTML and the HTML is being updated after that.. I think that's the issue, I'll edit my question to show what I mean

mplungjan Over a year ago

Updated to handle dynamic insertion

|

shubham715 · Accepted Answer · 2016-11-12 11:13:42Z

3

Try this

 <script>

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

 </script>

answered Nov 12, 2016 at 11:13

shubham715

3,3001 gold badge20 silver badges27 bronze badges

Collectives™ on Stack Overflow

jQuery triggering button click inside table td

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related