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>

Edit:

Вот 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

Там нет такого понятия, как вал() на ячейке

Если кнопка 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>