Question

我想知道为什么更新动态创建元素的数据会影响之前创建的其他元素的数据。

var createComment = function(data) {
    var post = $("<div/>").addClass("com").html("lorem "+Math.floor((Math.random()*10)+1)).data("extra", data);
    var btn = $("<a/>", {href:"",class:"sbm"}).text("submit");
    post.append(btn);
    post.on("submit", submitComment);

    post.appendTo("body");
};
var submitComment = function(e){
    //ajax here
    $(this).data("extra").time = new Date().getTime();//why this affects data of previously created comments
    $(this).find(".sbm").remove();
    test();
};
var test = function(){
    $("body").find(".com").each(function(){
      console.log($(this).data("extra")); 
    });
}
var d = {
    param: "test",
    a: "another"
};

$(".crea").on("click", function(e){
    e.preventDefault();
    createComment(d);
});
$("body").on("click", ".sbm", function(e){
    e.preventDefault();
    $(this).closest(".com").trigger("submit");
});

我猜测问题是什么......但我想知道如何能够做出很多解决方法！

Answer 1

由于对象使用而发生数据共享。您应该传递 .data（）对象的深层副本以防止它：

var createComment = function(data) {
  var post = $("<div/>").addClass("com").html("lorem "+Math.floor((Math.random()*10)+1))
  post.data("extra", $.extend({}, data));
  /* ... */
};

具有动态创建的元素和事件处理程序的jQuery数据

1 个答案: