初始化一个动态创建的 btn 组单选按钮答案

【问题标题】：Initialising a dynamically-created btn-group of radio buttons初始化一个动态创建的 btn 组单选按钮
【发布时间】：2018-06-09 22:12:41
【问题描述】：

我正忙着为办公室里不太熟悉 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>

我在链接到此页面的打字稿文件中执行了一些 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' 部分 - 它告诉我引导程序运行一些代码以初始化单选按钮列表 - 而且它似乎与动态创建的按钮组不兼容。

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

欺骗性的部分是：我无法使用相同的代码在 JSFiddle 上重现我的问题！它在 JSFiddle 上按预期工作：JSFiddle

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

【问题讨论】：

确保包含 bootstrap js 文件。您可以看到 JSFiddle 包含 jquery 、 bootstrap.css 和 bootstrap.js 。如果您不包含 bootstrap.js，则控制台中不会出现错误，这就是您可能错过它的原因。
不，它在我的项目中
data-bind 是干什么用的？那是为了像淘汰赛这样的另一个图书馆吗？如果没有实际重现您的问题的演示，很难提供帮助
澄清一下：一切看起来是否正常（视觉上）但没有您期望的数据（即未检查），还是看起来也有问题？
@knetsi，将您的评论作为答案。我想把赏金奖励给你。事实证明，在我们的框架内，我们有一个 .bootstrap.js - 这让我很困惑。这不是 Twitter 引导程序。我从来没有见过脚本加载一次——这就是导致头痛的原因。从 cdn 添加脚本 - 并且繁荣，上面的代码工作。但请注意：有一个加载顺序。 jQuery Mobile/jQueryUI 和 JQuery 必须在引导之前加载，这样代码才能工作，否则会导致冲突。显而易见的解决方案是最难发现的......

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

如果你的代码在 bootstrap 已经完成它的业务之后执行，它就不会工作......

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

所以你需要，

如果您使用的是文档就绪事件，请在引导之前添加您的脚本。
在不使用文档就绪事件的情况下将脚本直接移动到 html 之后（在页脚中）。

【讨论】：

【解决方案2】：

如果您再次调用文档就绪，则使用 bootstrap.js 关联的先前事件将被解除绑定，这不是一个好主意，因此您可以更改脚本的执行顺序（意味着在 bootstrap.js 之前）或保持文档就绪事件本身，直到您完成脚本。您可以在此处获取 jquery.holdready 的参考 https://api.jquery.com/jquery.holdready/

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

问题在于，正如@knetsi 在问题下的 cmets 中提到的那样，当您的站点上没有加载 bootstrap.js 时，您不会在控制台指出问题所在。当您像在我的网站上一样同时使用 JQuery UI / JQuery Mobile /JQuery 和 Bootstrap JS 时，需要最后加载 Bootstrap - 因为当您尝试刷新按钮

【讨论】：