jquery - 在附加列表项上添加 jQuery UI 按钮？

Question

我对 jQuery 有点陌生，我正在尝试在我的附加列表中添加一个 jQuery UI 按钮。
这是我使用的代码，当然；不起作用:(

我希望有人能帮我解决这个问题，谢谢。 :)

<ul></ul>
<button id="Add" type="button">Add</button>

<script>
    $(document).ready(function () {
        $("#Add").button({
            icons: {
                primary: "ui-icon-plusthick"
            },
            text: true
        });

        $("#Add").click(function () {
            $("ul").append("<li>"
                         + "<span>SOME TEXT</span>"
                         + "<button class='Remove' type='button'>Remove</button>"
                         + "</li>");
            return false;
        });

        $(".Remove").button({
            icons: {
                primary: "ui-icon-minusthick"
            },
            text: true
        });
    });
</script>

Answer 1

这个:

$(".Remove").button({
    icons: {
        primary: "ui-icon-minusthick"
    },
    text: true
});

仅适用于调用 $('.Remove').button(...) 时 DOM 中存在的 .Remove 元素，但没有调用它时任何 .Remove 元素。您希望将其合并到您的 #Add 处理程序中，以便新按钮在创建时将被 jQuery-UI 化。像这样的事情:

$("#Add").click(function() {
    var $li = $('<li><span>SOME TEXT</span><button class="Remove" type="button">Remove</button></li>');
    $li.find('button').button({
        icons: { primary: 'ui-icon-minusthick' },
        text: true
    });
    $("ul").append($li);
    return false;
});

演示:http://jsfiddle.net/ambiguous/fu9e9/

对于(可能的)下一个问题，您需要使用 $(document).on(...) 来连接“删除”按钮:

​$('ul').on('click', '.Remove', function() {
    $(this).closest('li').remove();
});​​​​​​​​

演示:http://jsfiddle.net/ambiguous/fu9e9/2/

这会将回调函数挂接到所有现有和 future 的 .Remove 元素。