Javascript 创建嵌套元素

我试图使用数组中的数据动态创建以下内容

<li><a href="#" class="red" id="5"><span>Some text</span></a></li>

目前，我正在以一种相当简单的方式创建它

var link = '<li><a href="#" class="' + this.cssClass + '" id="' + this.id + '"><span>' +   this.text + '</span></a></li>';
$('#options').append(link);

虽然我需要在单击链接时运行一个函数，但如何才能最好地执行此操作？

尝试以下方法：

$(link).find('a').click(clickHandlerFunction).end().appendTo('#options');

试试这个：

$(link).find('a').click(clickHandlerFunction).end().appendTo('#options');

---

您构建字符串的方式很好，尽管它看起来可能没有使用所有jQuery函数那么好，而且实际上比简单地使用所有jQuery助手函数执行得更快。如何一下子做到这一切是这样的：

$('<li><a href="#" class="' + this.cssClass + '" id="' + this.id + '"><span>' + this.text + '</span></a></li>')
    .appendTo('#options').find('a').click(function(e){
      // Handle click
      e.preventDefault();
    });

---

您构建字符串的方式很好，尽管它看起来可能没有使用所有jQuery函数那么好，而且实际上比简单地使用所有jQuery助手函数执行得更快。如何一下子做到这一切是这样的：

$('<li><a href="#" class="' + this.cssClass + '" id="' + this.id + '"><span>' + this.text + '</span></a></li>')
    .appendTo('#options').find('a').click(function(e){
      // Handle click
      e.preventDefault();
    });

---

在这些情况下，我喜欢在页面上创建一个隐藏的模板元素，为数组中的每个元素克隆该元素

<li id="template"><a href="" class="" id=""><span></span></a></li>

忘记了链接绑定部分

$("ul li a").live("click", function (){
    // DO WORK
});

---

这将永远绑定所有的a-click事件。在这些情况下，我喜欢做的是在页面上创建一个隐藏的模板元素，为数组中的每个元素克隆该元素

<li id="template"><a href="" class="" id=""><span></span></a></li>

忘记了链接绑定部分

$("ul li a").live("click", function (){
    // DO WORK
});

---

这将永远绑定您所有的a-click事件

这很有用-感谢分享。您可以将arr[i]替换为“this”谢谢！您可以添加一个模板{display:none；}css类，但我认为首选的方法是$document.readyfunction{$template.hide；}；这是有用的-谢谢分享。您可以将arr[i]替换为“this”谢谢！您可以添加一个模板{display:none；}css类，但我认为首选的方法是$document.readyfunction{$template.hide；}；