How can I run javascript code after an item added or removed from an unlimited value field?

Question

I am trying to add some js functionality to an unlimited value field in Drupal 7, it works on page load, but disappears after adding or removing an item, and I did not find a way to notify my code that the table is reloaded, and it is time to reinitialize those functions on the fields. How can I do this?

Answer 1

Create a Drupal behavior. It will be attached to each field when the page loads as well as to new fields added after any ajax calls (adding or removing).

Here is a basic example that will log a click on the text boxes in the field field_fieldname

(function ($) {
  // Logclick is an arbitrary unique behavior name
  Drupal.behaviors.logclick = {
    // Context here allows your function to run on ajax calls
    attach: function(context, settings) {
      // Your custom jQuery goes here
      $(".field-name-field-fieldname input.form-text",context).once('logclick',function() {
        $(this).click(function() {
          console.log('text box clicked');
          return false;
        });
      });
    }
  };
})(jQuery);

logclick can be changed to whatever you want to call your behavior.