Question

我有这个标准形式，没什么特别的：

<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>

相应的代码（完整模块功能here）位于jQuery UI Dialog的open: function(event, ui) {})部分内：

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

而且，它只能运行一次。对话框打开，单选按钮变为jQuery UI按钮小部件（jQuery UI controlgroup documentation），您可以选择任何选项，所选按钮保持选中状态（并且相应的事件被正式触发），其他按钮因此被取消选择。这是预期的行为。

但是当你关闭并重新打开对话框时，无论是在同一个DOM对象上还是在另一个对象上，它仍然在技术上工作（事件仍然被触发，并且设置了正确的值）按钮赢了' t 视觉工作。您单击的按钮不会保持“单击”状态，它们将在各自的状态下保持可视状态（轻微/快速“活动”点击状态除外）。

注释

在相同的open:功能中，我将所选按钮设置为：

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

并且工作正常，在打开时选择右侧单选按钮。删除它不会解决问题。

现在，当我试图监控正在发生的事情时：

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

这样也可以，每次。

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

不改变所提到的行为。

我尝试了什么

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

但似乎都不起作用。我也尝试强制选择（使用vanilla和jQuery方法）并取消选择按钮，但不仅这不起作用（？）它让人不知道他对自己的生活做了什么，我的意思是，这是 not 这个小部件是如何工作的，你通常不必像这样握住它，否则有什么意义呢？

还值得注意

如果没有jQuery UI代码，整个表单工作正常。事件被解雇，我得到了价值。每次。
我在这个实例中的其他位置有其他checkboxradio个对象，并且每次都可以正常工作。
在这个对话框中，我有其他jQuery UI对象，例如slider，它们都可以正常。

我做错了什么阻止这个小部件多次工作？

我正在使用与NPM一起安装的jQuery和jQuery UI：

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

编辑：完整（module）功能代码here。

Answer 1

是的，我认为想通了。关闭后，对话框代码仍然存在于DOM中（OK＆amp; cancel），这会导致各种麻烦。当对话框包含其他JQuery UI元素时，绝对在对话框中使用'destroy'而不是'close'：

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

jQuery UI radio / controlgroup（在对话框中）只能运行一次

注释

我尝试了什么

还值得注意

1 个答案: