Question

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

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

虽然我需要在点击链接时运行一个函数，但最好的方法是什么？

Answer 1

$('<a>').attr({
    id: this.id,
    href: '#'
}).addClass(this.cssClass).click(function() {

     // click event

}).html('<span>' + this.text + '</span>')
  .appendTo($('<li>').appendTo('#options'));

Answer 2

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

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

然后循环遍历数组并添加这些元素

$(arr).each(function(i){
    MyObject obj = arr[i];
    var $li = $("#template").clone().removeAttr("id");
    $("a", $li).attr("id", obj.id).addClass(obj.cssClass);
    $("span", $li).text(obj.text);
    $("ul").append($li);
});

忘了链接绑定部分!!

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

这应该永远绑定你所有的“a”单击事件

Answer 3

// 1. create jquery object from your html
var $li = $(link);

// 2. bind <a> element's click event
$("a", $li).click(function(){
   // your code or a function
});

// 3. place <li> somewhere in html
$("body").append($li);

Answer 4

试试这个：

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

Answer 5

构建字符串的方式很好（尽管它可能看起来不像使用所有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();
    });

创建嵌套元素

5 个答案: