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>