Question

I think this all comes down to a matter of syntax. I am not sure how to properly set the id attribute of the li item in the addItem() function.

If I remove the “ths” argument in the addItem() function (which is defined in the on click function), then the id attribute is correctly set for the dynamically created list item. If I pass the argument, the function fires successfully, but it doesn’t set the id for the list item. It simply creates a list item with no id.

While staying within the format I have below, how do I properly set the id of the dynamically created list item when passing an argument to the function?

I could do something like this:

$('<li>'+ths+'</li>').attr('id', 'foo'+i).attr('class', 'bar'); i++;

But that doesn’t follow the syntax of the model I have below. It’s also not very efficient.

(function () {
    var i = 1;
    var addContainer = {
        init: function () {
            $('<li></li>', {
                id: "today"
            }).prependTo('#myDiv');
        },
        addItem: function (ths) {
            $('<li>' + ths + '</li>', {
                id: 'newItem' + i
            }).prependTo('#orderList');
            i++
        }
    };
    $('body').on('click', '.itemRow', function () {
        var ths = $(this).children('.itemTitle').text();
        if ($('today').length >= 0) {
            addTodaysOrders.addOrder(ths);
        }
    });
})();​

This code is just a brief overview to get the point across….It’s missing some pieces. But the important part here is just the syntax of setting the id within this format.

Answer 1

$('<li>', {
    id: 'newItem' + i,
    text: ths
})