Question

I seem to run into this problem all the time while working with jQuery. When two form fields A and B have change event handlers that modify the other (A modifies B and B modifies A), what is the accepted design pattern for preventing them from creating a circular loop?

Answer 1

If you’re triggering the partner element’s “change” handler explicitly from each handler, just set a flag on the source element and abort the handler if you see that flag.

function handler(ev) {
  if ($(this).data("handling-now")) return;

  $(this).data("handling-now", true);

  // do stuff

  $(this).data("handling-now", null);
}