Почему не работает closest в jQuery?

Question

[denism300]

Есть форма:

<form method="post">
    <table class="table">
        <thead>
            <tr>
                <th scope="col"></th>
                <th scope="col"></th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr class="table__row">
                <td></td>
                <td></td>
                <td><button class="control-btn__add"><span class="dashicons dashicons-plus"></span></button></td>
            </tr>
        </tbody>
    </table>
    <?php submit_button('', 'primary', 'submit', TRUE); ?>
</form>

При клике на кнопку хочу склонировать строку, написал скрипт:

$(document).ready(function() {
    $('.table').on('click', '.control-btn__add', function(e) {
        e.preventDefault();
        form_row = $(this).closest('.table__row');
        form_clone = form_row.clone();
        form_row.after(form_clone);
    });
});

однако, в консоли получаю ошибку Uncaught ReferenceError: form_row is not defined
но, при этом, в codepen этот же код работает
https://codepen.io/denis-mukhin/pen/qBEKorR

Answer 1

[Aetae]

Вероятно у вас где-то выше объявлено "use strict"; что запрещает, помимо всего прочего, использование не объявленных переменных.
Решение, соответственно, переменные эти объявлять, используя var, let или const, а не мусорить в глобал.

Comments

[denism300]

именно так и было - вверху файла было объявлено use strict

[Aetae]

denism300, вы лучше его не убирайте, оно способствует более чистому и быстрому коду.)