Drupal.behavior unexpectedly triggered by Ajax callback

Question

I work on a sandbox project which provides a Responsive Tabs to Accordion Panel style. Everything works fine except that once the page loaded, any Ajax callback (i.e add to cart or colorbox) seems to trigger the js function of my module.

The way js function is set in plugins/styles/reponsive_tabs.inc

function theme_responsive_tabstoaccordion_panels_style_render_region($vars) {
  //...
  $element = array(
    //...
    '#attached' => array(
      'js' => array(
        drupal_get_path('module', 'responsive_tabstoaccordion_panels') . '/plugins/styles/responsive_tabstoaccordion_panels.js' => array('type' => 'file'),
      ),
      //...
    ),
  );
  //set the wrapper id to give to responsive_tabstoaccordion_panels.js
  drupal_add_js(array('responsive_tabstoaccordion_panels' => array('tabstoaccordion_panel' => '#'.$tab_id)), array('type' => 'setting'));

Drupal behavior in responsive_tabstoaccordion_panels.js

(function ($) {
  $.fn.extend({
    easyResponsiveTabs: function (options) {
      //the main js function which is triggered
      //...
    });

    Drupal.behaviors.responsive_tabstoaccordion_panels = {
      attach: function (context, settings) {   
        $(settings.responsive_tabstoaccordion_panels.tabstoaccordion_panel).easyResponsiveTabs({
          //Set options
          type: 'default',            
          //...
        });
      }
    };
})(jQuery);

I guess it has to see with the way I attach my function to Drupal.behaviors ?

Answer 1

All Drupal behaviors are called when an AJAX call is performed. This allows modules to attach its 'behaviors' to new loaded content.

There are much cases where the behavior should be attached just one time. For this cases the once function is recommended:

   Drupal.behaviors.responsive_tabstoaccordion_panels = {
      attach: function (context, settings) {   


    $(settings.responsive_tabstoaccordion_panels.tabstoaccordion_panel).once('rttap', function () {
      $(this).easyResponsiveTabs({
        //Set options
        type: 'default',            
        //...
      });
    }
  );  

This way the anonymous function that calls easyResponsiveTabs is called only one time for each element. If new elements are loaded the behavior is applied.