Question

I have set of Jquery-UI-Tabs which contains a save button for each tab. I want to track if any modification is done in the input fields in these tabs so that I can prompt the user to save the data before closing the application.

My idea is to use Jquery change handler to track modifications. I want to know if this is the best way to do this and if there are any performance disadvantages of using large no. of change event handlers. (I have to use about 40-50 change event handlers).

Answer 1

Yes this approach should work (depending on the specifics of your implementation)

Regarding performance , do you actually need 40-50 different change handlers? If the logic is the same, you can use event delegation to improve performance. For instance, if all the tabs are in an element with class="tab-container" you could use something like:

$(".tab-container").on("change", ":input", function(event){
  //some logic here
});