时间戳

首页 > 解决方案 > 如何使用jquery检测对下拉列表内的按钮的点击

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

问题描述

我在一件非常简单的事情上遇到了麻烦。我在下拉列表中有两个按钮，当用户点击它们时我无法检测到。其余的按钮效果很好，少了这两个。

按钮是：

<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按钮的。但是当我单击下拉列表中的这两个按钮时，什么也没有发生。为什么会这样？

注意：当我单击这些按钮时，下拉菜单总是关闭。

有人可以帮助我吗？非常感谢你！

标签： javascriptjquery

解决方案

像这样使用事件委托：

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

推荐阅读