Javascript callback after on change event has partial page refresh

Question

I am using a web framework which uses partial page rendering to refresh a part of a screen using the change event of a input field. I don't have access to the function for the change event, but I can inject jquery to add my own change event for that field. Unfortunately the field is also refreshed in the partial page rendering.

I am trying to inject my own code to add some styling to that part of the page. Unfortunately the $(document).ready only fires once at the beginning, so when the partial page refresh happens my code gets lost.

If I use $(document).change or attach directly to the change event of the input field my code fires before the framework's change and partial page refresh and therefore also gets lost.

So the only thing I could get to work is to wait 3 seconds with a callback and then apply my code again. This is however very ugly and on slow machines it sometimes needs more than 3 seconds.

Is there any way of attaching a callback to the change event that fires after the partial page refresh.

The framework uses very old web standards (table layout) and also tends to return false on a lot of it's change function's. Not sure if this will prevent any further propogation, that is to say prevent my callback.

This is the input element:

<input id="N24:MiscRt1:0" title="Miscellaneous Rate 1" class="xa" onchange="_uixspu('DefaultFormName',1,'DynCalcUpd','MiscRt1',0,1,{'_FORM_SUBMIT_BUTTON':'_fwkActBtnName_MiscRt1_DynCalcUpdYAS-AIio','evtSrcRowId':'AllocationsAM.AllocationsPlanVO321831001-132183-321838243CWBASG8243CWBPERFAPPRAISALOSCgK_CA','DynCalcUpdCol':'Misc1ValUGoCYJgF','evtSrcRowIdx':'06cW78OeE'});return true;" name="N24:MiscRt1:0" size="10" type="text" value="0.00" maxlength="38">

This is the code I tried:

function xxcwb_func() {
   $('span#CompTable table.x1n:nth-child(1) tbody tr td input').on('click', function(e) {
      e.stopPropagation();
   });
   $('span#CompTable table.x1n:nth-child(1) tbody tr td select').on('click', function(e) {
      e.stopPropagation();
   });
   $('span#CompTable table.x1n:nth-child(1) tbody tr td').on('click', function() {
      if ($(this).hasClass('xxcwb_highlight')) {
         $(this).parent().find('td').css('background', '#f2f2f5');
         $(this).parent().find('td').removeClass('xxcwb_highlight');
      }
      else {
         $(this).parent().parent().find('td').css('background', '#f2f2f5').removeClass('xxcwb_highlight');
         $(this).parent().find('td').css('background', '#97cbf6');
         $(this).parent().find('td').addClass("xxcwb_highlight");
      }
   });
   addSeparator('Current Salary');
   addSeparator('Proposed Increase Amount');
   addSeparator('PDD New Salary');
   addSeparator('Proposed Salary');
   addSeparator('LM New Salary');
   addSeparator('HR New Salary');
   addSeparator('CEO New Salary');
   addSeparator('Current Car Benefit');
   addSeparator('Current Total Cash');
}

$(document).ready(function() {
   // Run our code.
   xxcwb_func();
});

$(document).change(function() {
   xxcwb_func();
});

The callback also has to wait for the other change function and the partial page refresh to finish first.

Answer 1

$(document).change(function() {
    window.setTimeout(xxcwb_func,0);
});

This will push it to the browsers TODO list (with a due date specified in the second argument), which it will get around to doing after the partial page refresh occurs.

Answer 2

try

setInterval(function{
  /* check if the element is already "evented" */
  if (!$("#myelement").data("alreadyEvented")) {
    /* set the flag that it is ok now: element is evented */
    $("#myelement").data("alreadyEvented","true");
    $("#myelement").click(function{ /* or another event */
      /* your event */
    });
  }
},50);

it is simple, dumb, and should be working :)

after partial refresh the attribute will be removed as well -> event will be assigned again