theming – jQuery dialog is duplicated when set on a form that uses AJAX

Im using jQuery dialog on my form.

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

    $('.form-container').once('form-cont', function () {

    $('.my-form').once('my-form', function () {


  Drupal.custom.modalLinks = function () {
    $('body').on('click', '.modal-link', function (e) {
      var id = $(this).data('modal-id');
      var className = $(this).data('modal-class');
      var $modal = $('.modal--' + id);

        addClass('modal__wrap--' + className).


Drupal.custom.setModal = function (container) {

    var $container = $(container);

        autoOpen: false,
        draggable: false,
        width: 900,
        minHeight: 120,
        modal: true


This is working fine when the page is first loaded. However my form has AJAX submission. When submitted the form then returns a new form which also has a dialog modal link.

If I submit the form then when it reloads with AJAX then the jQuery dialog modal is duplicated (not visible but I can see with dev tools). If I open the dialog now then 2 modals are opened.

From reading about duplicate dialogs (but not for Drupal specifically) it seems the solution is to use remove or destroy on the modal. However when I try this is always completely disables the modal, it doesn’t just remove the duplicates.