將變量值綁定到視圖或html頁面的特定部分/ div？

Question

一個按鈕在單擊頁面的每個應用程序中動態地創建一個div元素。現在我想用它創建的時間戳綁定每個新的div元素。

當點擊這些div元素中的按鈕時，它們應該提醒它們創建的時間戳。

我的代碼是這樣

$("#creatediv").click(function() { 
    var n = new Date().getTime(); 
    $("#containerdiv").append("<div id='"+n+"-postfixtext'>"+n+"extrastuff \ 
     <div id='onemorediv'><button class='showtimestamp'></button></div></div>"); 
}); 

$("button.showtimestamp").click(function(){ 
    alert("the timestamp value is"); 
}); 

按鈕嵌套層次是不特定的，所以我能不能使用像

$(this).parent().parent().attr("id").split('-')[0]; 

有所收穫時間戳的值。

問：

1. 如何我可以綁定在特定的元素及其子變量的值？
   如果我想改變則具體元素變量的值，它應該只在該元素

2. 我是否需要使用存儲的數據的全局對象和傳遞數據的索引被改變新創建的div內所有孩子的ID？

3. 或者使用angular.js或backbone這樣的數據綁定框架會更好嗎？如果是，那麼應該怎麼做？

Answer 1

使用在創建元素時向元素添加元數據的jQuery .data()方法。

$("#creatediv").click(function() { 
    var n = new Date().getTime(); 
    var div = $("<div id='"+n+"-postfixtext'></div>"); 
    div.data('createdTimestamp', n); 
    div.append(extrastuff); 
    div.append($("<button>Click for timestamp</button>") 
     .data("parentDiv", div) 
     .click(function(ev) { 
      var parentDiv = $(this).data('parentDiv'); 
      var createdTimestamp = parentDiv.data('createdTimestamp'); 
      alert("the timestamp value is" + createdTimestamp); 
     }) 
    ); 
}); 

注意，在我的例子，你可以在技術上跳過所有設置，查找使用.data()調用數據，而是僅僅直接引用n變量在.click()事件處理程序。如果你這樣做，這將是一個Javascript關閉的例子。但是我寫的這個例子更多的是證明了.data()的使用。

UPDATE

這裏是上面的例子中，編輯使用倒閉，而不是從jQ​​uery的的.data()方法：

$("#creatediv").click(function() { 
    var n = new Date().getTime(); 
    var div = $("<div id='"+n+"-postfixtext'></div>"); 
    div.append(extrastuff); 
    div.append($("<button>Click for timestamp</button>") 
     .click(function(ev) { 
      alert("the timestamp value is" + n); 
     }) 
    ); 
}); 

您可以從您的.click()事件處理程序直接引用n變量，因爲n仍然在事件處理程序的範圍內。這種方式根本不使用jQuery的.data()方法。

Answer 2

你行你使用jQuery的數據功能節省時間戳記，並與每個元素 和綁定點擊事件附加時間戳用過jQuery的現場活動

http://api.jquery.com/live/

http://api.jquery.com/jQuery.data/