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>

jQuery触发按钮在表td内单击

2 个答案: