如何克隆jQuery UI複選框？

我正在動態構建表單。我將輸入的id標記重命名爲特定值（以便稍後可以參考它們）。當我包含一個複選框輸入時，我最終會收到一個收音機（或至少是奇怪的行爲）與單獨的複選框。 Fiddle來說明這個問題...如何克隆jQuery UI複選框？

HTML

<div id='first'>  
    <input type="checkbox" id="some-0"><label for="some-0">My Label</label></input> 
</div> 
<div id='second'> 
<input type="checkbox" id="some-1"><label for="some-1">My Label</label></input> 
</div>

的JavaScript

$('[id^=some]').button(); 
var temp = $('#second').clone(true); 
temp.find('input').each(function(){ 
    var NAME = $(this).attr('id').split('-'); 
    var LINEcount = 2; 
    $(this).attr('id',NAME[0]+'-'+LINEcount); 
}); 
$('body').append(temp);

來源

2014-12-08 shaun5

它看起來像你的克隆功能複製的onClick監聽器，這可以解釋爲什麼它切換兩個按鈕。 – softwarenewbie7331 2014-12-08 02:03:58

我發現了更奇怪的行爲：http://jsfiddle.net/shaun5/ms163u6L/2/ – shaun5 2014-12-08 02:24:24

嗯，我相信你的問題不在於clone函數，而是在button函數。您還需要更改<label>中的for屬性。嘗試使用下面的代碼：

$('[id^=some]').button(); 
var temp = $('#second').clone(true); 
temp.find('input').each(function(){ 
    var NAME = $(this).attr('id').split('-'); 
    var LINEcount = 2; 
    $(this).attr('id',NAME[0]+'-'+LINEcount); 
    $(this).next().attr('for',NAME[0]+'-'+LINEcount); 
}); 
$('body').append(temp);

這裏是我的Fiddle ..

來源

2014-12-08 03:25:03

謝謝。這是一個好主意，但最終仍然只有50％的解決方案（至少在我的代碼中）。如果你銷燬jQuery UI按鈕，然後重新啓動它，它可以在我的代碼中工作。我嘗試銷燬所有UI按鈕的測試也適用於這種方法... http://jsfiddle.net/shaun5/ms163u6L/5/ – shaun5 2014-12-08 23:18:54

我希望有幫助你DEMO 我作出這樣的單擊事件..你可以改變它與你想要的事件我將類添加到您的主要股利，並改變第一和第二頂部的div-1和頂部的div-2

$(document).ready(function(){ 
    $('.thisDiv > input').button(); 
    $('input[type="button"]').on('click',function(){ 
     var count = ($('.thisDiv').length) +1; 
     $('body').append('<div class="thisDiv" id="top-div-'+count+'"><input type="checkbox" id="some-'+count+'"><label for="some-'+count+'">My Label '+count+'</label></input</div>'); 
      $('.thisDiv > input').button(); 
    }); 
});

如果那你在找什麼？任何幫助我在這裏

來源

2014-12-08 02:37:13

感謝您的答案，但我已經簡化了我的代碼，以問這個問題。放棄複選框的jQuery UI比試圖爲所有複選框設置例外更容易（並且是我暫時完成的），但是我仍然希望找到使用克隆的解決方案... – shaun5 2014-12-08 03:01:38

-1

var clone=$("#original_object").clone(true); 

clone.appendTo("#new_parent");

來源

2014-12-08 15:39:22

如何克隆jQuery UI複選框？

回答

相關問題