单击行中的按钮时获取 HTML TR 的元素

Question

我有以下动态 HTML 行。

<tr role="row" class="odd">
     <td contenteditable="false" class="sorting_1"> </td>
     <td contenteditable="false"> <span class="name">Alex Nilson </span></td>
     <td contenteditable="false"><span class="price"> 1234 </span></td>
     <td contenteditable="false"> <span class="qty" >1234 </span></td>
     <td><button class="pr_edit" href="javascript:;"> Edit </button></td>
     <td><button class="pr_elete" href="javascript:;"> Delete </button></td>
</tr>

单击编辑按钮时，我需要将该特定行的单元格元素的值作为 JS 变量获取到 jQuery，我可以 AJAX POST到另一个 PHP 页面以插入数据库。我试着像下面那样做，但没有成功。

$(document).ready(function () {
     $('.pr_edit').click(function () {
         var currentTD = $(this).parents('tr').find('td');            
         $.each(currentTD, function () {
             var iname = $(this).find("span.name").html();
             var iprice = $(this).find("span.price").val();
             var iqty=$(this).find("span.qty").val();
         });

它没有捕获变量，因为我 intended.How 我能做到吗？我需要将这些 SPAN 数据获取到三个变量。

Answer 1

动态生成的元素需要事件 delegation，并使用 text() 而不是 val() 来获取 span 的内容。也可以使用 closest('tr') 获取父级 tr，你不需要使用每个。

$(document).ready(function () {
     $('body').on('click', '.pr_edit', function () {
         var currentTR = $(this).closest('tr');
         var iname = currentTR.find("span.name").text();
         var iprice = currentTR.find("span.price").text();
         var iqty = currentTR.find("span.qty").text();
     });
 });

Answer 2

如果您想使用动态数据 jQuery，您需要动态绑定您的点击事件。相反：

$('.pr_edit').click(function () {
    //magic
}

做

$('.pr_edit').on('click', function () {
    //magic
}

但是，即使您的整个 table 都是动态加载的，您也必须有一个 "allways" 元素作为参考。喜欢：

$('html, body').on('click', '.pr_edit', function () {
  //magic
}

查看此以供参考：http://api.jquery.com/on/

单击行中的按钮时获取 HTML TR 的元素

Get elements of HTML TR when a button in the row is clicked

javascript

php

jquery

jquery-delegate