javascript - 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());
});

如果按钮是在加载后插入的，那么您需要委托(delegate)。以下代码用于在动态插入完整表格时单击表格单元格中的任何按钮

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