problem to pass data-id to modal popover

HTML :

 
	<table class="table table-hover" id="table4">
													<thead>
														<tr>
															<th width="20%">Rendering engine</th>
															<th width="25%">Browser</th>
															<th width="25%">Platform(s)</th>
															<th width="15%">Engine version</th>
															<th width="15%">CSS grade</th>
														</tr>
													</thead>
													<tbody>
														
													</tbody>
												</table>


/// modal
<div class="modal hide" id="addBookDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>test</h3>
  </div>
    <div class="modal-body">
        <p><div id="getdata"></div></p>
        
    </div>
</div>

Javascript :

 $('#table4').dataTable({
					"bProcessing": true,
					"sAjaxSource": "js/results.json"

				});

$("#open-AddBookDialog").click(function() {
var username = $(this).data('id');
$("#getdata").html(username);

});

Json :

 ["test","172120886","2013-03-26","test","<a data-toggle=\"modal\" id=\"open-AddBookDialog\" data-id=\"172120886\" title=\"Add this item\" class=\"open-AddBookDialog btn btn-primary\" href=\"#addBookDialog\">View<\/a>\n"]

i am using mozilla firebug
[15:13:27.637] Empty string passed to getElementById(). @ http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js:2

can someone help me ?