jQuery触发按钮在表td中单击

Question

我的桌子tbody和tr中有一个按钮：

这是我正在尝试jquery事件的代码：

但是什么也没发生...我在这里做错了什么？

 $("#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> 

编辑：

这是表本身的HTML标记（完整的）：

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

伙计们，我想我知道问题出在哪里...加载页面时不会立即生成表。 相反，它是在对服务器执行POST操作之后加载的，并且服务器返回HTML作为结果，并且我如下更新HTML：

 $('.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());
                                      }
                                  });
                }
            }
        });

我认为这里的问题是，在最初加载DOM之后，我需要以某种方式触发按钮上的事件。

Answer 1

单元格上没有val（）这样的东西

如果按钮ID应该是唯一的，请执行以下操作：

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

如果在加载后插入了按钮，则需要委托。 这是在动态插入完整表格时单击表格中单元格中任何按钮的代码

 $(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> 

注意：如果具有ID tableProducts的容器是静态的，则可以执行

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

Answer 2

尝试这个

 <script>

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

 </script>