如何使用 jquery 检测对下拉列表内的按钮的点击

Question

I am having trouble with a very simple thing. I have two buttons inside a dropdown, and I can't detect when the user click on them. The rest of the buttons works well, less this two.

The buttons are:

<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>

My function is:

//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();
} );

When I click the rest of the buttons, the console.log(id_btn); prints the id of the button. But when I click these two buttons inside the dropdown, nothing happens. Why is this happening?

Note: When I click these buttons, the dropdown always gets closed.

Can somebody help me? Thank you very much!

Answer 1

Use event delegation like this:

$(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')
            }
        })
      })