Avoid reattaching javascript when a form is rebuilt by ajax callback

Question

I have a form that uses ['#attached']['js'] to attach a simple javascript file. A checkbox element of this same form uses ['#ajax'] to dynamically update some portions of the form. I'm finding that, when the form is rebuilt after the ajax callback, the javascript file is reattached multiple times, causing unintended behaviors.

Is there any way to avoid reattaching a javascript file to a form if that same javascript has been attached previously?

Answer 1

As Clive mentioned, the usual way to solve this is to use once() when attaching behaviors:

Drupal.behaviors.myBehavior = {
  attach: function (context, serverSettings) {
    $('elementSelector', context).once('myId', function () {
      // The code that will be executed only once.
    });
  }
};

Also, check the official docs on Managing JavaScript in Drupal 7.