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，我选择了所有的复选框。