JS Почему срабатывает событие по добавлению строки таблицы?

Question

[Николай Бараненко]

Здравствуйте.

Ниже код, который формирует таблицу - dataTables
в которой есть быстрый поиск, сортировка столбцов по имени
и есть кнопка по нажатию, которой добавляется строка сверху и наполняется
такой информацией
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>

Проблема в том, что даже при первоначальном запуске формы сразу уже срабатывает событие по добавлению строки.

Подскажите, где ошибка.

Answer 1

[gleendo]

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