Question

我正在使用引导程序表。当我点击表格中的复选框以获取项目ID值时，我想执行一个动作。

<table data-toggle="table" id="table-style" data-row-style="rowStyle" data-url="data/g3.json"  data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc" data-single-select="false" data-click-to-select="true" data-maintain-selected="true">
  <thead>
    <tr>
      <th data-field="state" data-checkbox="true"></th>
      <th data-field="id" >Item ID</th>
      <th data-field="name" data-sortable="true">Product Name</th>
      <th data-field="price" data-sortable="true">Actual Price</th>
      <th data-field="discount_price" data-sortable="true">Discount Price</th>
      <th data-field="stock_avail" data-sortable="true">Stock Available</th>
    </tr>
  </thead>
</table>

Jquery函数：

$("input[name='btSelectItem']").on("click","input[name='btSelectItem']",function(){
        alert("Hello");
        var values = "";
         $.each($("input[name='btSelectItem']:checked"), function(index, value) {
             var data = $(this).parents('tr:eq(0)');
             if(index > 0)
                 values ++;
             values +=$(data).find('td:eq(1)').text();
         });
         alert(values);
   });

当我点击复选框时我的功能没有打电话，请帮我解决这个问题。提前致谢

以下是我的表格代码：

<table id="eventsTable" class="table table-striped table-hover" data-id-field="id" data-toolbar="#toolbar" data-show-columns="true" data-show-toggle="true" data-show-refresh="true" data-search="true" data-url="data/g3.json" data-height="300" data-toggle="table" style="margin-top: -41px;">
<thead>
<tbody>
<tr class="selected" data-index="0">
<td class="bs-checkbox">
<input type="checkbox" name="btSelectItem" data-index="0">
</td>
<td style="">Test</td>
<td style="">21</td>
<td style="">High</td>
<td style="">Low</td>
<td style="">High</td>
<td style="">100</td>
</tr>
<tr data-index="1">
<td class="bs-checkbox">
<input type="checkbox" name="btSelectItem" data-index="1">
</td>
<td style="">Test2</td>
<td style="">26</td>
<td style="">High</td>
<td style="">Low</td>
<td style="">Medium</td>
<td style="">50</td>
</tr>
<tr data-index="2">
<tr data-index="3">
<tr data-index="4">
<tr data-index="5">
<tr data-index="6">
<tr data-index="7">
</tbody>
</table>

Answer 1

由于您已将事件处理程序附加到输入元素，因此您不需要on中的任何其他过滤器。试试：

$(document).on("click", "input[name='btSelectItem']", function(){ ... })

Answer 2

除了选择器错误之外，问题是引导表js代码在您单击并停止传播时捕获事件，因此它不会冒泡并且您无法在文档级别捕获。

好消息是它提供了一个API来捕获这些事件。在这种情况下，您可以使用using System; using System.Globalization; using Newtonsoft.Json; public class Model { public int Count { get; set; } public string Text { get; set; } } internal sealed class FormatNumbersAsTextConverter : JsonConverter { public override bool CanRead => false; public override bool CanWrite => true; public override bool CanConvert(Type type) => type == typeof(int); public override void WriteJson( JsonWriter writer, object value, JsonSerializer serializer) { int number = (int) value; writer.WriteValue(number.ToString(CultureInfo.InvariantCulture)); } public override object ReadJson( JsonReader reader, Type type, object existingValue, JsonSerializer serializer) { throw new NotSupportedException(); } } class Program { static void Main(string[] args) { var model = new Model { Count = 10, Text = "hello" }; var settings = new JsonSerializerSettings { Converters = { new FormatNumbersAsTextConverter() } }; Console.WriteLine(JsonConvert.SerializeObject(model, settings)); } }，onCheck等多个事件，如docs中所述，例如：

onCheckSome

如何通过单击表中的复选框来执行动态数据的操作

2 个答案: