创建嵌套元素

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

试试这个：

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

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

正在构建的字符串的方法是罚款（尽管它可能看起来不一样好使用所有的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(); 
    }); 

Answer 5

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

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

这应该绑定所有的“一” - 单击事件，直到永永远远