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运行一些代码以初始化单选按钮列表 - 它似乎不适合动态创建的按钮组。< / p>

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

更糟糕的部分是：我无法使用相同的代码在JSFiddle上重现我的问题！它在JSFiddle：JSFiddle

上按预期工作

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

Answer 1

如果再次调用document ready，那么使用bootstrap.js关联的先前事件将是unbind，这不是一个好主意，因此您可以更改脚本的执行顺序（在bootstrap.js之前的意思）或保持文档就绪事件本身，直到你完成你的脚本。你可以在这里获得jquery.holdready的参考 https://api.jquery.com/jquery.holdready/

Answer 2

如果您的代码在bootstrap已经完成业务后执行，那么它将无效......

您需要在引导程序之前执行代码...

所以你需要，

如果您正在使用文档就绪事件，请在引导之前添加脚本。
在您的html（页脚）之后移动脚本，而不使用文档就绪事件。

Answer 3

以下对我有用（本地和小提琴）。

除了将document.ready合并到正文中的脚本标记（之前的答案中提到）之外，看起来你的挖空绑定有问题。我将checked: true / checked: false更改为checked: statusMsg并添加了statusMsg: ko.observable("default")。当observables值等于某些无线电输入nodeValue时，Knockout将检查一个单选框。来自文档：

对于单选按钮，KO将设置要检查的元素是否并且仅当参数值等于单选按钮节点的值时属性或checkedValue参数指定的值。

Knockout checked binding documentation

点击后我记录了这些框的checked值并且它有效。

我的代码和小提琴：

<body>
<fieldset data-type="horizontal" data-bootstrap="radiogroup">
  <label>
    <input type="radio" name="g1" value="default" data-bind="checked: statusMsg"/>Recent
  </label>
  <label>
    <input type="radio" name="g1" value="order" data-bind="checked: statusMsg"/>By Number
  </label>
  <label>
    <input type="radio" name="g1" value="advanced" data-bind="checked: statusMsg"/>Advanced
  </label>
</fieldset>
<script>
$(document).ready(function() {
    $("*[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) + '%');
        });
    var viewModel = {
        statusMsg: ko.observable("default")
    }
    ko.applyBindings(viewModel);
});
</script>
</body>

Working fiddle here

Answer 4

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

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

4 个答案: