JQuery UI ButtonSet 在复制的 HTML 上失败答案

【问题标题】：JQuery UI ButtonSet fails on copied HTMLJQuery UI ButtonSet 在复制的 HTML 上失败
【发布时间】：2013-05-09 02:01:22
【问题描述】：

<div id="TabTemplate" style="display: none;">
    <span id="tab_radios">
        <input type="radio" id="tab_l1" name="layout"/>  
        <label for="tab_l1">1</label>
        <input type="radio" id="tab_l2" name="layout" checked="checked" />  
        <label for="tab_l2">2</label>
    </span>
</div>

<div id="RealTab">
</div>

function replaceAll(find, replace, str) {
    return str.replace(new RegExp(find, 'g'), replace);
}

// copy tab_radios's html from TabTemplate to RealTab
$('#RealTab').html(replaceAll('tab_', 'tab1_', $('#TabTemplate').html()));
$('#tab1_radios').buttonset();
$('#tab1_radios :input').change(function() { alert("click"); });

查看fiddle（简化为更大的代码）

我的 HTML 包含一个带有单选按钮的隐藏 TemplateTab div 和一个空的 RealTab div

首先我将内部 HTML 从 TemplateTab 复制到 RealTab 并将所有 tab_ 替换为 ids 标签等中的 tab1_

然后我在 tab1_radios 上调用 buttonset() 并附加一个更改事件

但是单击按钮会导致 JQuery 异常“在初始化之前无法调用按钮上的方法” - 为什么？？

请注意，删除 buttonset() 调用会产生一个（丑陋的）单选按钮，可以很好地处理事件。

谢谢！

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

radioGroup() 会拾取与单选按钮名称相同的所有内容，因此您需要更改新创建的单选按钮的名称。

这是一个有效的小提琴——http://jsfiddle.net/PEcX9/17/——用于概念验证，但我相信你可以找到一种更清洁的方法来做到这一点:)

    function replaceAll(find, replace, str) {
      return str.replace(new RegExp(find, 'g'), replace);
   }

    // copy tab_radios's html from TabTemplate to RealTab
    $('#RealTab').html(replaceAll('tab_', 'tab1_', $('#TabTemplate').html()));

   //change the names of the radio inputs
   $('#tab_l1').attr('name', 'layout1');
   $('#tab_l2').attr('name', 'layout1');
   $('#tab1_radios').buttonset();
   $('#tab1_radios :input').change(function() { alert("click"); });

http://bugs.jqueryui.com/ticket/8761

【讨论】：