0

我为 jquery 编写了一个插件，它将 jquery ui 按钮小部件样式应用于复选框（基于此答案）。

function checkbox() {
    $.each($(".inp-checkbox"), function(index, value) {
        $("label[for='" + $(value).attr('id') + "']").remove();

        $(value).prop({"type": "checkbox" })
            .val(false)
            .after($("<label />").attr({ for: $(value).prop('id')}))
            .button({text: false })
            .click(function (e) {
               alert("hello"); 
        });
    });
}

在大多数情况下，这就像预期的那样工作。但是，我发现当我第二次调用该函数时（如果我启用或禁用它，需要重新创建复选框），按钮标签没有被正确创建。

标签标记应如下所示（并且在我第一次“按钮化”复选框时会这样做：

<label for="chkTesting" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-only" role="button" aria-disabled="true">
    <span class="ui-button-text"></span>
</label>

然而在第二次运行之后，它看起来像这样：

<label for="chkTesting"></label>

在创建新标签之前，我添加了一些代码来删除旧标签，但这没有任何区别。据我所知，代码中没有语法错误或异常。

知道可能是什么原因造成的吗？

这是一个演示问题的小提琴。

4

2 回答 2

0

由于它已经创建，您需要先删除按钮，执行类似“

    function checkbox() {
$(".inp-checkbox").after.button('remove');
        $.each($(".inp-checkbox"), function(index, value) {
            $(value).prop({"type": "checkbox" })
                .val(false)
                .after($("<label />").attr({ for: $(value).prop('id')}))
                .button({text: false })
                .click(function (e) {
                   alert("hello"); 
            });
        });
    }
于 2013-08-29T18:36:55.783 回答
0

在阅读了一些JQuery UI Button API 文档后，我意识到我可以使用“按钮”小部件的“刷新”功能来刷新复选框（又名按钮）的视觉外观，而无需重新创建按钮。

value.button("refresh");

这很好用，下次我一定会先检查 API 文档：P

于 2013-08-29T19:11:08.297 回答