初始化动态创建的btn组单选按钮

Question

我正忙着为办公室里的开发人员编写一些辅助函数,他们不太熟悉Bootstrap - 它采用基本的html并为它们创建引导布局.

在这种情况下,我试图制作一个合理的单选按钮水平列表.

一个例子是:

    <fieldset data-type="horizontal" data-bootstrap="radiogroup">
        <label>
            <input type="radio" name="g1" value="default" data-bind="checked: true"/>Recent
        </label>
        <label>
            <input type="radio" name="g1" value="order" data-bind="checked: false"/>By Number
        </label>
        <label>
            <input type="radio" name="g1" value="advanced" data-bind="checked: false"/>Advanced
        </label>
    </fieldset>

我在链接到此页面的typescript文件中执行一些JQuery - 代码如下:

    function layoutUnwrappedBootstrapControls() {
        $("*[data-bootstrap='radiogroup']")
            .each((index, element) => {
                var listOfRadioButtons = $(element).find('label').clone();
                $(element).children().remove();
                $(element)
                    .append("<div class='btn-group col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix' data-toggle='buttons'></div>");
                $(element)
                    .children(":first")
                    .append(listOfRadioButtons)
                    .find("label")
                    .addClass("btn btn-primary")
                    .css("width", (100 / listOfRadioButtons.length) + '%');
                $(element).children(":first").button().button('refresh'); //< the issue   
            });
    }

哪个产生:

<div class="btn-group col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix" data-toggle="buttons">
    <label class="btn btn-primary" style="width: 33.3333%;">
        <input type="radio" name="g1" value="default" data-bind="checked: true" data-mini="true" data-theme="h" id="tz15" checked="checked">Recent
    </label>
    <label class="btn btn-primary" style="width: 33.3333%;">
        <input type="radio" name="g1" value="order" data-bind="checked: false" data-mini="true" data-theme="h" id="tz16">By Number
    </label>
    <label class="btn btn-primary" style="width: 33.3333%;">
        <input type="radio" name="g1" value="advanced" data-bind="checked: false" data-mini="true" data-theme="h" id="tz17">Advanced
    </label>
</div>

在页面上,这似乎很好.然而,我的问题是data-toggle='buttons'部分 - 它告诉我bootstrap运行一些代码以初始化单选按钮列表 - 并且它似乎与动态创建的按钮组不一致.

我尝试重新初始化按钮组不起作用.单选按钮仍然保持静态 - 不会在标签上换出"活动",并在输入上"检查".

更糟糕的部分是:我无法使用相同的代码在JSFiddle上重现我的问题!它在JSFiddle:JSFiddle上按预期工作

如何强制重新初始化动态创建的按钮组？

Answer 1

问题在于，正如 @knetsi 在问题下的评论中提到的那样，当您的网站上没有加载 bootstrap.js 时，您不会在控制台中收到错误来指出问题所在。当您像在我的网站上一样使用 JQuery UI / JQuery Mobile /JQuery 和 Bootstrap JS 时，需要最后加载 Bootstrap - 因为当您尝试刷新按钮时，它会导致与其他库发生冲突