Question

如何从动态创建的行元素中获取id。下面是我尝试过的代码，但它不会触发事件。

HTML

   <table id="tblRawMaterials" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>
                A
            </th>
            <th>
                B
            </th>
            <th>
                C
            </th>

        </tr>
    </thead>
    <tbody> 
        <tr id="DCB4325E-951C-67E3-1E8F-7270D488A1EB"  >
        <td>G20002</td>
        <td>1,783</td>
        <td>2,000</td>           
        </tr>
    </tbody>
</table>

脚本

 $("#tblRawMaterials tbody").click( function(e) {
           // Here i need to capture row id of clicked cell.
  });

提前致谢

Answer 1

你需要等同的（旧）sintax on，完全相同的概念：

$("#tblRawMaterials tbody").delegate('tr', 'click', function(e) {
  console.log($(this).attr('id'))
});

您需要使用事件委派，这样事件将附加到父tbody，并在单击tr时随时触发。它并不依赖于tr，因此它也适用于动态添加的元素。

请检查che fiddle

Answer 2

您需要使用事件委派，这样事件就会附加到父tbody，并在点击tr时触发。它不依赖于tr，因此它也适用于动态添加的元素。

$("#tblRawMaterials tbody").on('tr','click',function(e) {
  var id = $(this).attr('id');
});

使用jQuery delegate

描述：根据a，为现在或将来与选择器匹配的所有元素的一个或多个事件附加处理程序具体的根元素集。

$("#tblRawMaterials tbody").delegate('tr','click',function(e) {
      var id = $(this).attr('id');
});

Answer 3

您也可以使用closest

尝试这样做

＆＃13;

$(document).ready(function() {
  $("#tblRawMaterials tbody").click(function(e) {
    var $tr = $(e.target).closest('tr'),
      rowId = ($tr).attr("id"); // Here you can capture the row id of clicked cell.
    alert(rowId);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table id="tblRawMaterials" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>
        A
      </th>
      <th>
        B
      </th>
      <th>
        C
      </th>

    </tr>
  </thead>
  <tbody>
    <tr id="DCB4325E-951C-67E3-1E8F-7270D488A1EB">
      <td>G20002</td>
      <td>1,783</td>
      <td>2,000</td>
    </tr>
  </tbody>
</table>

＆＃13;

更新：

如果您确实需要delegate，则可以使用以下代码段。

$(document).ready(function () {
    $(document).delegate("#tblRawMaterials tbody", "click", function (e) {
        var $tr = $(e.target).closest('tr'),
          rowId = ($tr).attr("id"); // Here you can capture the row id of clicked cell.
        alert(rowId);
    });
});

注意：此处我没有为tr元素绑定点击事件。

希望这有帮助！

Answer 4

试试这个

$(document).ready(function () {

        $('#tblRawMaterials tr').click(function () {
            alert($(this).attr('id'));
        });

});

如何从表体点击事件中捕获行id

4 个答案: