jQuery触发按钮在表td中单击 [英] jQuery triggering button click inside table td
问题描述
我的桌子tbody和tr里面有一个按钮:
I have a button inside my table tbody and tr :
这是我正在尝试进行jquery事件的代码:
This is the code I'm trying for jquery event:
但是什么也没发生...我在这里做错什么了吗?
But nothing happens... What am I doing wrong here??
$("#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标记(完整的一个):
Here is the HTML markup of the table itself (full one):
<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:
Guys, I think I know where the problem is... The table isn't generated right away upon when the page is loaded. Instead, it is loaded after the POST action was made to the server and server returns HTML As result and I update the HTML like following:
$('.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之后，我需要以某种方式触发按钮上的事件.
I think the issue here is that I need to somehow trigger the event on the button after the DOM was loaded initially..
推荐答案
在单元格上没有val()这样的东西
There is no such thing as val() on a cell
如果按钮ID应该是唯一的，请执行以下操作:
If the button ID is unique as it should be, just do this:
$("#btnSearch").click(function() { // using the unique ID of the button
console.log($(this).val());
});
如果在加载后插入了按钮，则需要委托.这是在动态插入整个表格时单击表格中单元格中任何按钮的代码
If the button is inserted after load, then you need to delegate. Here is code to click any button in a cell in the table when the complete table is dynamically inserted
$(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的容器是静态的，则可以进行
NOTE: If the container with the ID tableProducts is static, you can do
$("#tableProducts").on("click","button.btn",
这篇关于jQuery触发按钮在表td中单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
