Question

I’m in the process of learning JQuery, and I’m looking to have a list of links that trigger another Javascript function when clicked. The code I have right now (below) makes the <li> tags successfully, but the inner JQuery is returning an object (“1. [object Object]”) instead of the text with a link tag wrapped around it.

$('<li></li>', {
    text: $('<a></a>', {
        text: data[i].name,
        onclick: 'doSomething()'
    }),
    id: 'response'
}).appendTo('ol.responseList');

Your help’s greatly appreciated!

Answer 1

Use html instead of text.

$('<li></li>', {
    html: $('<a></a>', {
        text: data[i].name,
        onclick: 'doSomething()'
    }),
    id: 'response'
}).appendTo('ol.responseList');

P.S. I suggest not using onclick attributes to bind events. Use jQuery’s event API.

$('<li></li>', {
    html: $('<a></a>', {
        text: data[i].name
    }).click(doSomething),
    id: 'response'
}).appendTo('ol.responseList');

UPDATE: If you want to pass i to doSomething, you need to do something like this (outside of the loop):

function createFunc(i){
    return function(){
        doSomething(i);  // this will be the correct value of `i`
    };
}

And then do this:

$('<li></li>', {
    html: $('<a></a>', {
        text: data[i].name
    }).click(createFunc(i)),  // Yes, this should be `createFunc(i)`, it returns a function
    id: 'response'
}).appendTo('ol.responseList');