JS Why does the table row add event fire?

Question

css

Hello.
Below is the code that forms the table - dataTables
in which there is a quick search, sorting columns by name
and there is a button on click, which adds a row on top and is filled with
such information
1.1 1.2 1.3

<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" href="css/dataTables.bootstrap.min.css">


<script type="text/javascript">
$(document).ready(function() {
    var dataSet = [
       [ "Tiger", "Nixon", "user1"],
        [ "Garrett", "Winters", "user2", ]
    ];

var t = $('#example').DataTable(

        {
            data: dataSet,
            columns: [
                { title: "Фамилия" },
                { title: "Имя" },
                { title: "Пользователь" }
            ]
        }

);
var counter = 1;

$('#addRow').on( 'click', function () {
t.row.add( [
counter +'.1',
counter +'.2',
counter +'.3'
] ).draw( false );
counter++;
} );

// Automatically add a first row of data
$('#addRow').click();
} );
</script>
<div class="container">
<button id="addRow" class="btn btn-success"><i class="glyphicon glyphicon-ok-sign" ></i> Добавить строку</button>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Фамилия</th>
        <th>Имя</th>
        <th>Пользователь</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>Фамилия</th>
        <th>Имя</th>
        <th>Пользователь</th>

    </tr>
    </tfoot>
</table>
</div>

The problem is that even at the initial start of the form, the event for adding a row immediately fires.
Please tell me where is the mistake.

Answer 1

// Automatically add a first row of data
$('#addRow').click();