EditableGrid - 通过 jQuery 获取 <td> 的新值

Question

我正在使用editableGrid 表，我需要将<td> 元素的编辑内容复制到隐藏的<input>s 中。

我正在尝试通过 jQuery .text() 方法获取这些值，但它会在更改之前返回值。当我再次编辑 <td> 时，它会返回以前输入的文本等。 简单例子：

<table id="htmlgrid" class="testgrid">
<tr id="0">
    <td>Fridge 123</td>
    <input type="hidden" name="[0][name]" value="Fridge 123">
    <td>7.000 CZK</td>
    <input type="hidden" name="[0][price]" value="7000">
</tr>
</table>

现在，我想做的是将名称“Fridge 123”更改为“Fridge 456”并将这个新名称复制到输入中：<input type="hidden" name="[0][name]" value="Fridge 456">

使用这个 jQuery 代码

$("#htmlgrid td").change(function() {
    console.log($(this).text());
});

我得到Fridge 123 的值，这是错误的。如何做到这一点，以获得新输入的值？

Answer 1

从query documentation、change 事件仅限于<input> 元素、<textarea> 框和<select> 元素。

试试类似的东西

$("#htmlgrid td").bind("DOMSubtreeModified",function(){
  console.log($(this).text());
});

或

$("#htmlgrid td").on("change",'input',function(){
  console.log($(this).val());
});