javascript - 为什么 Chrome 开发工具显示未绑定(bind)到我的元素的点击事件监听器？

Question

我正在开发一个应用程序，它使用:

• jquery 3.2.1
• Bootstrap 3.3.7
• FontAwesome 5.0.8

我有一个模式窗口(ID为#notifierModal)，其中有一个代表“向下”箭头的元素(使用 FontAwesome 的 chevron-circle-down )。

其标记如下:

<ul class="fa-ul toggle-notifier-group">
    <li> 
        <a href="#">Item 1</a>
        <i class="fas fa-chevron-circle-down toggle-filters"></i>
        <ul class="filters" style="display: none;">
            <li>Item 1 - sub A</li>
            <li>Item 1 - sub B</li>
            <li>Item 1 - sub C</li> 
        </ul>
    </li>

    <li> 
        <a href="#">Item 2</a>
        <i class="fas fa-chevron-circle-down toggle-filters"></i>
        <ul class="filters" style="display: none;">
            <li>Item 2 - sub A</li>
            <li>Item 2 - sub B</li>
            <li>Item 2 - sub C</li> 
        </ul>
    </li>

    <!-- Further items -->
</ul>

目的是，当用户单击 FontAwesome 向下箭头时，它会切换下面相应 .filters 列表的可见性(即，如果用户单击“Item 1”，它只会切换“项目 1 - 子”列表)。

因此，我将以下内容添加到我的应用程序引用的名为 app.js 的文件中:

$(function() {
    $('#notifierModal').on('click', '.toggle-filters', function () {
        $(this).siblings(".filters").toggle();
    });
});

这可行，但使用几次后，当用户单击图标时似乎没有发生任何事情。

为了尝试调试此问题，我检查了 Chrome 中的 .toggle-filters 元素，然后转到Event Listeners > click。我得到以下信息:

app.js 第 755 行的引用确实包含我上面发布的针对 .toggle-filters 上的点击的 js。但所有其他行号都是与该元素无关的js。例如:

• 第 201 行:$(document).on('click', '#exportExcel', function (e) {
• 第 321 行:$(document).on('click', '.browse-ctp__filters-data .include, .browse-ctp__filters-data .exclude', function () {<

所有其他行(除了第 755 行)都是这样的。

如果 Chrome 与我正在检查并要求查看其点击事件监听器的元素无关，为什么 Chrome 会向我显示这些内容？当它给我提供对不相关内容的引用时，我该如何调试它？或者它是否相关，这就是它可能不起作用的原因吗？

在 Chrome 版本 70.0.3538.77 中注意到，但之前在其他版本中也见过此行为。

Answer 1

更新的答案:

检查器工具中元素选项卡侧面板中的 eventListener 选项卡显示页面中注册的事件。

Why is Chrome showing me these if they are not related to the element I'm inspecting and asking to see the click event listeners for?

如果您在元素面板中的标记中选择任何元素，那么您可以看到为该元素注册的所有事件以及绑定(bind)在父元素上的所有事件。

How can I debug this when it's giving me references to stuff that's not related?

如果您切换复选框，则您可以看到仅绑定(bind)在所选元素上的事件。