Note: This problem may be specific to Safari.
Hiya folks, I have a weird edge case I encountered and while I've got a "fix" it doesn't really satisfy me very much and can result in unnecessary function calls.
I have a custom field that generates a widget form consisting of several text boxes. Basically it's a "service" data type where you can enter a service name, the amount of time a service took, the cost per hour, and the subtotal.
Since it's convenient to calculate the subtotal automatically there are onchange events on the other input elements.
Since there are potentially numerous services, I've set the field in the data type to accept infinite values. This generates the handy "Add another item" button and wrapper div that make ajax calls to add additional widgets as a user needs them. The problem happens when a user updates an input element and clicks directly on the "Add Another Item..." button. The event triggered by the button click happens BEFORE the onblur/onchange that the inputs have, creating this problem...
1. Ajax call happens, new div data is obtained but is not inserted into the DOM yet
2. onblur/onchange event calls, and the math happens on the original div
3. The ajax call completes and swaps out the original div for the new div with the additional form elements, math is lost!
My workaround, for now, is something like this...