Jquery 1.12.1 :在选项卡中动态添加checkboxradio小部件的问题

Question

当在选项卡中添加动态无线电复选框时，我有一个问题。如果我将复选框添加到选项卡之外，它将正确生成。如果我在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时，它们有一个包含所有图标的sprite表，然后使用背景位置显示它们。(这样可以节省文件空间)。

对于一个检查点，他们声明如下：

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

但是，当您的复选框在容器ui-widget-content中时，它们会添加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;
}

这是一个更新小提琴，我选择了所有的复选框。