2

每次单击按钮时，按钮都会在我的单页应用程序中动态创建一个 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. 如何将 a 中变量的值绑定到特定元素及其子元素？
    如果我想在特定元素中更改该变量的值，那么它应该只在该元素中更改

  2. 我是否需要使用一个全局对象来存储数据并将该数据的索引作为新创建的 div 中所有子项的 id 传递？

  3. 还是使用 angular.js 或主干等数据绑定框架会更好？如果是，那么应该怎么做？

4

2 回答 2

2

在创建元素时，使用 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().

更新

这是上面的示例，编辑以使用闭包，而不是.data()来自 jQuery 的方法：

$("#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);
        })
    );
});

您可以直接从事件处理程序中引用该n变量.click()，因为n它仍在事件处理程序的范围内。这种方式根本不使用.data()jQuery的方法。

于 2013-06-21T13:33:54.580 回答
0

您可以使用 jQuery 数据函数来保存时间戳并为每个元素附加时间戳，并使用 jQuery 实时事件绑定点击事件

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

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

于 2013-06-21T13:24:17.227 回答