Как обнаружить нажатие на кнопку, которая находится внутри выпадающего меню с jquery

Question

У меня проблемы с очень простой вещью. У меня есть две кнопки внутри выпадающего меню, и я не могу определить, когда пользователь нажимает на них. Остальные кнопки работают хорошо, кроме этих двух.

Кнопки:

<div class="btn-group">
    <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Nodes</button>
    <ul class="dropdown-menu" id="NodeFilters">
        <button type='button' class='btn btn-secondary btn-sm' id='allFilter'>All</button>
        <button type='button' class='btn btn-secondary btn-sm' id='cleanFilter'>Clean</button>
    </ul>
</div>

Моя функция:

//This function controls if some button is clicked
function btnController(){
    $('.btn').click(function(){
        let id_btn = $(this).attr("id");
        console.log(id_btn);

        if(id_btn == 'allFilter' | id_btn == 'cleanFilter'){
            alert('sss')
        }
    });
}
$(document).ready(function() {
    btnController();
} );

Когда я нажимаю на остальные кнопки console.log(id_btn); выводят id кнопки. Но когда я нажимаю эти две кнопки внутри выпадающего меню, ничего не происходит. Почему это происходит?

Примечание. Когда я нажимаю эти кнопки, раскрывающийся список всегда закрывается.

Может ли кто-нибудь мне помочь? Большое спасибо!

Answer 1

Используйте делегирование событий следующим образом:

$(function(){
        $(document).on('click', '.btn', function(){
          let id_btn = $(this).attr("id");
            console.log(id_btn);

            if(id_btn === 'allFilter' || id_btn === 'cleanFilter'){
                alert('sss')
            }
        })
      })