Binding ctools modal handlers dynamically without page reload

On a recent project I required a way to bind ctools handlers to their respective links dynamically. The project had the links being displayed using ajax based on user input, and so the handlers would have to be bound to the new links (and unbound for the links that disappeared) without the page being reloaded.

Searching online for a solution did not turn up any useful results. Digging into the ctools module code, there didn't seem to be any easy way to accomplish this. The handlers are bound on page load, using Drupal behaviours.

The behaviour that is executed is located in ctools/js/modal.js and is named Drupal.behaviors.ZZCToolsModal. Calling this method directly won't work because of the use of the jquery function once().But the useful code parts can be copied and added into a custom function, removing the once() function call. In addition, a call to unbind for each link must be made to prevent multiple handlers from being registered for the same link.

The following is an example of the a.ctools-use-modal handler code modified to work in a custom function: // Modified code to set handler

$('area.ctools-use-modal, a.ctools-use-modal').each( function() {
        var $this = $(this);
        $this.unbind(); // Note the unbind: Otherwise there are multiple bind events which causes issues
        $this.click(Drupal.CTools.Modal.clickAjaxLink);
        // Create a drupal ajax object
        var element_settings = {};
        if ($this.attr('href')) {
          element_settings.url = $this.attr('href');
          element_settings.event = 'click';
          element_settings.progress = {
            type: 'throbber'
          };
        }
        var base = $this.attr('href');
        Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
      });