Не работают события для динамически созданных элементов?

Question

[Ilya Famin]

При клике на кнопку должен создаваться элемент и казалось бы всё работает, но не работают события привязанные к классам этого элемента

$('.add-newPost-bth').on('click', function(){
    $(`<div class="newPost">
        <div class="form-new-post">
            <form class="field-form-new-post">
                
            </form>
        </div>
        <script>
            autosize($('.textaria-new-post'));
        </script>
    </div>`).insertAfter('.newPost')
})

P.S содержимое было уменьшено для простоты чтения. Методы из разряда добавить live(), setTimeout и т.п не помогли

Answer 1

[Rsa97]

Используйте всплытие событий.

$(document).on('click', '.add-newPost-bth', function() {
  ...
});

Вместо document можно подставить селектор любого статического родителя.

Comments

[Ilya Famin]

Rsa97, это надо применять ко всем событиям или только к блоку указанному выше? (так не работает)

[Сергей]

Ilya Famin, учись правильно формулировать вопросы

[Ilya Famin]

Сергей, а что не так?

[lUser L]

Ilya Famin, Если добавляются новые элементы — при помощи ajax’а или функций типа append() — то события, click в вашем случае не затрагивают их.

Для того, что бы обратиться к динамически созданным элементам используйте делегирование.
обращайтесь к элементу от родителя, который был виден во время загрузки страницы. Или от документа как в отвеете выше.

Предлагаю почитать:
Обработка динамически доб...
Делегирование событий