jQuery UI radio / controlgroup (in a dialog) works only once

Question

I have this standard form, nothing fancy:

<form>
    <fieldset id="feedType">
        <legend class="ui-corner-top">Display Type</legend>
        <label for="mixed">Mixed</label>
        <input type="radio" name="radio-1" id="mixed" class="feedType" />

        <label for="photo">Photo</label>
        <input type="radio" name="radio-1" id="photo" class="feedType" />

        <label for="text">Text</label>
        <input type="radio" name="radio-1" id="text" class="feedType" />
    </fieldset>
</form>

The corresponding code (full - module -function here ) is inside the open: function(event, ui) {}) part of a jQuery UI Dialog :

$(this).find('#feedType').controlgroup();

And, well, it works only once . The dialog opens, the radio buttons are turned into jQuery UI buttons widgets ( jQuery UI controlgroup documentation ) and you can select any option, the selected button stays selected (and corresponding events are duly fired) and the others are thusly de-selected. This is the expected behaviour.

But when you close and re-open the dialog, be it on the same DOM object or on another one, while still technically working (the events are still fired, and the proper values set) the buttons won't visually work anymore . The button you click won't stay "clicked", they will all stay visually in their respective state (except for a slight/quick "active" click state).

Notes

In the same open: function I set the selected button like this:

$(this).find('input#' + oldType || 'mixed').prop("checked", true)
    .checkboxradio('refresh');

and it works fine, the right radio button is selected at opening time. Removing this won't solve the problem.

Now when I try to monitor what is going on:

$(this).find('.feedType').on("change", function(event){
    console.log("CHANGE EVENT!", $(this).attr('id'));
});

This works fine, each time , too.

$(this).find('.feedType').checkboxradio({
    icon: false
});

Changes nothing to the behavior mentioned.

What I tried

$(this).find('.feedType').on("change", function(event){
    $dialog.find('#feedType').controlgroup('refresh');
    $(this).checkboxradio('refresh');
});

But neither seem to work. I also tried forcefully select (using both vanilla and jQuery methods) and un-select the buttons, but not only does this not work (?) it makes one wonder what he did with his life, I mean, this is not how this widget works, you don't normally have to hold its hand like this, otherwise what's the point?

Also worth noting

• Without the jQuery UI code, in itself, the whole form works fine . Events are fired, I get the values back. Every time .
• I have other checkboxradio objects elsewhere in this instance, and they work fine, every time, that is.
• In this very dialog, I have other jQuery UI objects, such as a slider , and they all work fine .

What did I do wrong that prevents this widget from working more than once?

I'm using jQuery and jQuery UI installed with NPM:

"dependencies": {
    ...
    "jquery": "^3.2.1",
    "jquery-ui": "^1.12.1"
}

EDIT: Full ( module ) function code here .

Answer 1

Right, I think figured it out. The dialog code was still living in the DOM after closing (either OK & cancel) and that was causing all kinds of trouble. Definitely use 'destroy' instead of 'close' on the dialog when it contains other JQuery UI elements :

$(this).dialog('destroy');