jQuery的触发按钮，点击

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> 

伙计们，我想我知道问题出在哪里...表格不是在加载页面时立即生成的。

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

我觉得这里的问题是，我需要以某种方式触发事件上：相反，POST行动向服务器发出后服务器返回的HTML作为结果，我更新HTML喜欢它后面装载之后的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>

Answer 2

试试这个

<script> 

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

</script>