javascript - 使用 JQuery 嵌套 HTML 标签

Question

我正在学习 JQuery，我正在寻找一个链接列表，这些链接在单击时会触发另一个 Javascript 函数。我现在拥有的代码（如下）使<li>标签成功，但内部 JQuery 返回一个对象（“1. [object Object]”）而不是带有链接标签的文本。

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

非常感谢您的帮助！

Answer 1

使用html而不是text.

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

PS我建议不要使用onclick属性来绑定事件。使用 jQuery 的事件 API。

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

更新：如果你想传递i给doSomething，你需要做这样的事情（循环外）：

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

然后这样做：

$('<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');

Answer 2

继续附加到创建的元素。 html也可能有效，但我认为附加更清楚：

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