jquery - 在创建动态 HTML 时使用 jquery .data()

Question

我的网络应用程序中的大部分 HTML 都是动态生成的：例如，我获取一个对象并创建一个网格行，如下所示：

var TheHTML = TheHTML + '<div class="HiddenDiv">' + SomeObject.ID + '</div>';
TheHTML = TheHTML + ....
$('#SomeTableContainer').html(TheHTML);

这样，当用户单击该行时，我可以使用访问该行上表示的对象的 ID.find('.HiddenDiv')

如何改为使用.data()将对象的 ID 插入行，然后在不从 DOM 读取 ID 的情况下检索它？

谢谢。

Answer 1

以对象方式构建 DOM：

$('#SomeTableContainer').children().remove();

var TheHTML=($('<div>')
   .append($('<div>').html('my subdiv div').data('subid',1))
   .append($('<div>').html('my subdiv div1').data('subid',2))
);
TheHtml.data('id',id);
TheHtml.bind('myevent',function(e){console.log($(this).data('id'));});
$('#SomeTableContainer').append(TheHTML);