0 
<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"); });

查看小提琴（简化为更大的代码）

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

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

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

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

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

谢谢 ！

4

1 回答 1

3

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

于 2013-05-09T02:26:43.590 回答