Jquery UI 1.12.1：在選項卡內動態添加checkboxradio小部件的問題

Question

在選項卡中添加動態checkradioboxes時遇到問題。如果我在Tab之外添加複選框，它會正確生成。如果我在標籤內添加，「勾號」就會變成^圖標。

<input type="submit" value="Add" class="submit1" name="btnGo" id="btnGo" /> 

<div id="z" style="margin: 0px auto; width:800px; height:30px;"></div> 

<div id="tabDiv" class="tabsDiv880_W1400"> 
    <ul> 
     <li class="tabWidth110" ><a class="tabWidthHref90" href="#tabs-Detail"  >Detail</a></li> 
    </ul> 
    <div id="tabs-Detail"  class="tabsPanelH850" > 
     <div id="y" style="margin: 0px auto; width:800px; height:30px;"></div> 
    </div> 
</div> 

jQuery代碼

$('#btnGo').unbind('click').on('click', function(e) { 
     e.preventDefault(); 

     $('#z') 
      .html('<label for="wsKh"></label><input Type="checkbox" name="wsKh" id="wsKh" checked="checked "/>' + 
         '<label for="wsKh1"></label><input Type="checkbox" name="wsKh1" id="wsKh1" checked="checked " disabled="disabled" />'); 
     $('#wsKh,#wsKh1').checkboxradio(); 

     $('#y') 
      .html('<label for="wsyKh"></label><input Type="checkbox" name="wsyKh" id="wsyKh" checked="checked "/>' + 
         '<label for="wsyKh1"></label><input Type="checkbox" name="wsyKh1" id="wsyKh1" checked="checked " disabled="disabled" />'); 
     $('#wsyKh,#wsyKh1').checkboxradio(); 
    }); 

的問題是，背景現在的位置-X是錯的，我不知道什麼做更正它（被顯示的圖標是^，而不是勾號）。我沒有做任何改變。

正確造型：

background-position-x: 
-64px jquery-ui.theme.min.css:5.ui-icon-check 
initial jquery-ui.theme.min.css:5.ui-state-checked 
initial jquery-ui.theme.min.css:5.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus 
-64px jquery-ui.min.css:7.ui-icon-check 
initial jquery-ui.min.css:7.ui-state-checked 
initial jquery-ui.min.css:7.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus 

不正確的造型：

background-position-x: 
initial jquery-ui.theme.min.css:5.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus 
initial jquery-ui.min.css:7.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus 
-64px jquery-ui.theme.min.css:5.ui-icon-check 
initial jquery-ui.theme.min.css:5.ui-state-checked 
-64px jquery-ui.min.css:7.ui-icon-check 
initial jquery-ui.min.css:7.ui-state-checked 

Answer 1

當你使用jQuery UI，他們擁有的所有圖標，然後使用後臺位置，以顯示他們一個精靈表。 （這節省了他們的文件空間）。

對於一個對勾，他們有這樣的聲明：

.ui-icon-check { 
    background-position: -64px -144px; 
    background-position-x: -64px; 
    background-position-y: -144px; 
} 

然而，當你的複選框容器ui-widget-content，他們appply的initial背景位置，但在一個標籤時，它被設置爲50% 50%。

你能做的要麼是目標所有的複選框，像這樣：

.ui-icon-check { 
    background-position: -64px -144px !important; 
    background-position-x: -64px; 
    background-position-y: -144px; 
} 

，或者僅定位.ui-widget-content的複選框。

.ui-widget-content .ui-icon-check { 
    background-position: -64px -144px !important; 
} 

這是一個updated fiddle，我選擇了所有的複選框。