0

I have a table:

          <table id="wb_globaltable" class="table display standard configurations">
            <tr id="main_data_row1" class="row_data row_even">
              <td class="first" align="left">AuthDB User</td>
              <td class="last" align="left"><span id="value_1" class="config_string">Unset</span></td>
            </tr>
            <tr id="main_data_row2" class="row_data row_odd">
              <td class="first" align="left">AuthDB Password</td>
              <td class="last" align="left"><span id="value_2" class="config_string">Unset</span></td>
            </tr>
            <tr id="main_data_row3" class="row_data row_even">
              <td class="first" align="left">Web Session Timeout </td>
              <td class="last" align="left"><span id="value_3" class="config_long">12</span></td>
            </tr>
            <tr id="main_data_row4" class="row_data row_odd">
              <td class="first" align="left">Runtime Session Timeout</td>
              <td class="last" align="left"><span id="value_4" class="config_long">14400</span></td>
            </tr>
      </table>

that I am updating values for by clicking in the spans, changing the HTML and saving the new value with a button click from the changed markup:

    $(document).ready(function() {
      $('span[class^=config]').on( 'click', function (){
        var thisSpan = $(this);
        var cellText = $(this).text(); 
        var cellID = $(this).attr('id');
        $(this).html('<div class="config_long_edit"><input type="text" value="' + cellText +'" class="config_input">&nbsp;&nbsp;<button id="config_long_edit_save_8" class="detailsbutton_nomarg save_config" role="button"><span class="ui-button-text">Save</span></button>&nbsp;<button id="config_item_edit_cancel_8" class="detailsbutton_nomarg cancel_config" role="button"><span class="ui-button-text">Cancel</span></button>&nbsp;<button id="config_item_reset_8" title="" class="detailsbutton_nomarg reset_config" role="button" disabled="disabled"><span class="ui-button-text">Reset</span></button></div>').insertAfter(this); 
        $('.save_config').on( 'click', function (e){
            e.preventDefault();
            var inputText = $(this).prev('input').val();
            $(this).closest('td').html('<span id="'+ cellID +'" class="config_long">'+ inputText +'</span>');
        });      
    });
});

Clicking the "Save" button definitely updates the span (BTW, I would definitely prefer to not clear out the <td> every time, but it was the only dependable way to get this functionality working). But it only works one time per session. I don't want to refresh the page every time I click this "Save" button and I thought the using .on() was asynchronous and that any function invoking that would work with whatever HTML that was dynamically generated during a single session.

This may be an elementary programming principle I've missed somewhere along the line. I welcome your help in finding out how to get this working more than once. Thanks for your attention.

jimiayler
  • 674
  • 2
  • 11
  • 27
  • 1
    I'm amused that you do `var thisSpan = $(this);` and then never use the variable, instead using `$(this)`. – Draco18s no longer trusts SE Feb 05 '16 at 21:31
  • 2
    Every time you recreate the `` with `$(this).closest('td').html()`, you're creating new elements dynamically. You need to use the delegation method described in the duplicate question to bind the click handlers. – Barmar Feb 05 '16 at 21:32
  • Draco18s, that was vestigial, I should have removed it. Barmar, I'll look at this other answer -- tried to track it down first here before posting. Thanks for your prompt replies. – jimiayler Feb 05 '16 at 21:44
  • Yep, delegation worked like a charm -- just had to change that first click handler to read `$('td.last').on( 'click', 'span[class^=config]', function (){` and it's good to go. Thanks again for your help. – jimiayler Feb 08 '16 at 14:19

0 Answers0