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 にコピーし、ID ラベルなどのすべての 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 に答える