Question

<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（）调用会产生一个（丑陋的）单选按钮，可以处理事件。

谢谢！

Answer 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

JQuery UI ButtonSet在复制的HTML上失败

1 个答案: