CODEWITHSUNDEEP
jqueryjquery-ui
Drew
Drew

Reputation: 898

Add a jQuery UI button on an appended list item?

i am bit new to jQuery and I am trying to add a jQuery UI button on my appended list.
Here is the code I used, which of course; does not work :(

I hope someone can help me with this thanks. :)

<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>

Upvotes: 1

Views: 5221

Answers (1)

mu is too short
mu is too short

Reputation: 434755

This:

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

only applies to .Remove elements that are in the DOM when you call $('.Remove').button(...) and there aren't any .Remove elements when you call it. You want to merge that into your #Add handler so that new buttons will be jQuery-UI-ified when they're created. Something like this:

$("#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;
});

Demo: http://jsfiddle.net/ambiguous/fu9e9/

And for your (probable) next question, you'll want to use $(document).on(...) to hook up the "remove" buttons:

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

Demo: http://jsfiddle.net/ambiguous/fu9e9/2/

That will hook the callback function up to all existing and future .Remove elements.

Upvotes: 4

Related Questions