Fields don't reflect previous Quick Edit changes when clicking Quick Edit a second time

Question

I've added a column to the edit screen and add an input for that column in the quickedit. Everything saves and displays like I'd expect with one small hiccup.

If I click on Quick Edit for a particular post, make a change to the custom input, and save.... well the column updates properly. However, if I click Quick Edit again (without refreshing the page) the custom input maintains the original input.... the input isn't getting the new value, even though I am using .on(), inlineEditPost.revert() and even though the hidden value is being properly updated (I can see it with Chrome's dev tools). Perhaps this is strictly a JS error, but I figured I would post here first.

This is the content of my custom column:

echo $sub = get_post_meta(get_the_ID(), 'kia_subtitle', true);
echo '<div class="hidden kia-subtitle-value">' . $sub . '</div>';

This is the jquery I am using to set the custom input's value in Quick Edit mode:

$( '.editinline' ).on( 'click', function(){

    // revert Quick Edit menu so that it refreshes properly
    inlineEditPost.revert();

    posttitlelabel = $( ':input[name="post_title"]', '.inline-edit-row' ).parents( 'label' ); 
    tag_id = $( this ).parents( 'tr' ).attr( 'id' );    
    subtitle = $( 'div.kia-subtitle-value', '#' + tag_id ).text();  

    $( 'input.kia-subtitle-input', '.inline-edit-row' ).val( subtitle ).parents( 'label' ).insertAfter( posttitlelabel );

});

The posttitlelabel, and insertAfter parts are just to move the input so that it immediately follows the regular Title.

Answer 1

The solution was on the jquery side of things. The .on function needed to bubble upwards to be sure that it was always getting the most recent, ajax-added content. I only had to adjust the first line to be more aligned with jquery documentation for .on().

$( '#the-list' ).on( 'click', '.editinline', function(){

    // revert Quick Edit menu so that it refreshes properly
    inlineEditPost.revert();

    posttitlelabel = $( ':input[name="post_title"]', '.inline-edit-row' ).parents( 'label' ); 
    tag_id = $( this ).parents( 'tr' ).attr( 'id' );    
    subtitle = $( 'div.kia-subtitle-value', '#' + tag_id ).text();  

    $( 'input.kia-subtitle-input', '.inline-edit-row' ).val( subtitle ).parents( 'label' ).insertAfter( posttitlelabel );

});

Answer 2

To populate a <select> element in this circumstance I found it necessary to use the setTimeout(..., 0) trick.

window.setTimeout(function(){ jQuery('#foo').val(bar); }, 0);