Question

我有一张桌子：

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

我正在更新值，方法是单击跨度，更改HTML并通过更改标记中的按钮单击保存新值：

    $(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>');
        });      
    });
});

单击“保存”按钮肯定会更新范围（顺便说一下，我绝对不希望每次都清除<td>，但这是使这项功能正常工作的唯一可靠方法）。但它每次只能使用一次。我不想在每次单击“保存”按钮时刷新页面，我认为使用.on()是异步的，并且任何调用它的函数都适用于在单个会话期间动态生成的任何HTML。

这可能是我错过了某条线的基本编程原则。我欢迎您的帮助，找出如何使这项工作不止一次。谢谢你的关注。

通过.on（'click'）更新表只能工作一次

0 个答案: