創建嵌套元素

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

這應該綁定所有的「一」 - 單擊事件，直到永永遠遠