jsdtScrollxError

HTML

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
	<button id="my-button" type="button">Test</button>
	<table id="my-dt-id" class="display my-dt-class">
		<thead>
			<tr>
				<th>Col1</th>
			</tr>
		</thead>
		<tbody>
		<tr>
			<td>dog</td>
		</tr>
		<tr>
			<td>cat</td>
		</tr>
	</tbody>
</table>

JavaScript

$(function () {
        $("#my-dt-id").dataTable({
			"scrollX": true
        });
		
		$("#my-button").click(function () {
            $('.my-dt-class').each(function () {
				$(this).DataTable().draw();
            });
        });
    });