javascriptjqueryhtmleditablegrid

EditableGrid - get new value of <td> via jQuery

I am using editableGrid table, and I need to copy edited content of <td> elements into hidden <input>s.

I'm trying to get those via jQuery .text() method, but it returns values before change. When I edit a <td> again, it returns previously entered text etc. Simple example:

<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>

Now, what I want to do, is change a name "Fridge 123" to "Fridge 456" and copy this new name into input:<input type="hidden" name="[0][name]" value="Fridge 456">

Using this jQuery code

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

I get a value of Fridge 123, which is wrong. How can this be done, to get newly-entered values?

Solution

  • From query documentation, change event is limited to <input> elements, <textarea> boxes and <select> elements.

    Try something like

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

    or

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