Question

Most of the HTML in my web app is dynamically generated: I take an object and create a grid row for instance, something like this:

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

That way, when the user clicks on that row, I can access the ID of the object represented on the row using .find('.HiddenDiv')

How can I instead use .data() to insert the ID of the object to the row and later retrieve it without reading the ID from the DOM?

Thanks.

Answer 1

custruct DOM in object way:

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