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时在DOM中的$('.Remove').button(...)元素，并且在您调用它时没有任何.Remove元素。您希望将其合并到#Add处理程序中，以便新按钮在创建时将是jQuery-UI-ified。像这样：

$("#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/

这会将回调函数挂钩到所有现有和未来的.Remove元素。

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

1 个答案: