Readable tables

[tahishae]

Got an example from here: http://jsfiddle.net/4f0331ss/1/ ♪ There's nothing going on when the button gets pressed. Please tell me what my mistake is.

$(function() {
    var inpMin = '<input class="input-mini">',
    butMin = '<button type="submit" class="save">save</button>';
    $('table').on('click', 'td', function(e) {        
      var $that = $(this);
      if($that.hasClass('edited')) return false;
      $that.html($(inpMin).val($that.text())).append(butMin)
      .addClass('edited');
    });
    $('table td').on('click', '.save', function() {
      var $that = $(this);
      $that.parent('td').text($that.siblings('.input-mini').val())
      .removeClass('edited');
    });
});

Table dynamicemitted through innerHTML.

[charlenef]

Problem is, the table is dynamically generated and the subscription to the event on the button click

$('table td').on('click', '.save', function() {

presumes cells are already available.
To decide, we need to take the same approach as the cells in the cell.

$('table').on('click', 'td .save', function(e) { 

In addition, it is now necessary to stop the event on the button. save I don't want you to go back to the cell click processor. false from the processor function.
Final example:

$(function() {
var inpMin = '<input class="input-mini">',

butMin = '<button type="submit" class="save">save</button>';

$('table').on('click', 'td', function(e) {

console.log('td click');

var $that = $(this);

if ($that.hasClass('edited')) return false;

console.log('td click', 'not edited');

$that.html($(inpMin).val($that.text())).append(butMin)

.addClass('edited');

});

$('table').on('click', 'td .save', function() {

console.log('save click');

var $that = $(this);

var siblings = $that.siblings('.input-mini');

console.log('save click', 'siblings', siblings.length, 'val', siblings.val());

$that.parent('td').text(siblings.val())

.removeClass('edited');

return false;
});
$('table').html(&lt;tr&gt;         &lt;td&gt;1&lt;/td&gt;         &lt;td&gt;2&lt;/td&gt;         &lt;td&gt;3&lt;/td&gt;     &lt;/tr&gt;     &lt;tr&gt;         &lt;td&gt;1&lt;/td&gt;         &lt;td&gt;2&lt;/td&gt;         &lt;td&gt;3&lt;/td&gt;     &lt;/tr&gt;)

})

table {

width: 50%;

}

td {

padding: 5px;

}

.input-mini {

display: block;

margin-bottom: 5px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1"></table>