Как заставить jq обрабатывать новый созданный html?

Question

[urajo]

Суть в чем. Скрипт при клике по mleft получает от сервера ответ и создает второе меню. Функция getTable работает со вторым полученным меню но срабатывает она 1 раз почему-то. Т.е при первом создании меню - все работает, класс присваивается, когда это меню создается второй раз - ничего не работает. Как быть?

$(document).ready(function(){
    $('.mleft').on('click',function(){
        $('.mleft').removeClass('action');
        $(this).addClass('action');
        let left = $(this).data('left');
        $.ajax({
            type: 'POST',
            url: '/view-main',
            data: {
                left: left
            },
            success:function(items){
                $('.button-main').hide('slow',function(){
                    $('.main-menu > nav > ul').empty();
                    items.main.forEach(function(body){
                        $('.main-menu > nav > ul').append('<li class="mmain" data-main="' + body.id + '">' + body.name + '</li>');
                    });
                });
                $('.button-main').slideToggle('slow');
                getTable();
            },
            error:function(err){
                console.log(err);
            }
        });
    });
    function getTable(){
        $('.mmain').on('click',function(){
            $('.mmain').removeClass('action-m');
            $(this).addClass('action-m');
        });
    }
});

Answer 1

[ThunderCat]

Отслеживать через документ
$(document).on('click','.mmain',function(){...}

Comments

[urajo]

('.mleft').on('click',function()

Это тоже через документ?

[Антон Шаманов]

как минимум $('body') и ему явно нужнен перевод к функции on

Answer 2

[Михаил Ушенин]

Почитайте https://api.jquery.com/on/ в секции Direct and delegated event handlers. Чтобы событие обрабатывалось для вновь создаваемых элементов страницы, обработчик нужно привязывать к родительскому элементу, например, к документу, а селектор элемента назначения указывать в вызове метода on(). Т. е. в вашем случае нужен обработчик типа delegated.