javascript - 如何使用 JQuery 选择器根据多个类之一查找 DOM 元素

Question

我的直接/确切问题可以在最底部找到。以下是一些背景信息/解释。

所以我用 TS 编写了这个 jQuery 函数

    startEventListeners = () => {
        $(document).ready(() => {
            $('.dropdown-submenu a.test').on('click', function (e) {
                $(this).next('ul').toggle();
                e.stopPropagation();
                e.preventDefault();
            });
        });
    };

它的目的是在下拉列表中打开子菜单项，看起来像这样

    <div class="container">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                New
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li class="dropdown-submenu">
                    <a class="test" tabindex="-1" href="#">Blank Template <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">As Library Template</a></li>
                        <li><a href="#">For This Use Only</a></li>
                    </ul>
                </li>
                <li class="dropdown-submenu">
                    <a class="test" tabindex="-1" href="#">Copy of... <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu" ng-repeat="options in $ctrl.templateLookup.data">
                            <a class="test" href="#">{{options.key}} <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">As Library Template</a></li>
                                <li><a href="#">For This Use Only</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

在我到达这两行之前，一切都很好

<li class="dropdown-submenu" ng-repeat="options in $ctrl.templateLookup.data">
<a class="test" href="#">{{options.key}} <span class="caret"></span></a>

我的 jquery 选择器专门寻找类，“下拉菜单”和“测试”

因为我正在使用 angular 来完成它的工作，所以没有问题；一些类被注入(inject)到这两行中并将它们变成这样

<li class="dropdown-submenu ng-scope" ng-repeat="options in $ctrl.templateLookup.data">
<a class="test ng-binding" href="#">{{options.key}} <span class="caret"></span></a>

所以现在我的 jquery 选择器找不到它们。我只想更改选择器以搜索 .dropdown-submenu.ng-scope 和 .test.ng-binding，但是还有两个其他位置使用 dropdown-submenu 和 test，但不要使用任何 Angular 我的选择器找不到它们。

在介绍了一大堆背景信息之后(抱歉)我的问题是这个。

有没有一种方法可以格式化我的 jquery 选择器来找到我需要它找到的 DOM 元素，而不是基于它的完整类，即 .dropdown-submenu.ng-scope，而是仅从它的多个类中的一个？

Answer 1

也许试试这样的东西

$('document').on('click','.dropdown-submenu, a.test',function( e ){  })

这应该注册任何点击事件并在事件发生时根据选择器对其进行验证，而不是监视可能尚不存在的预构建列表。

执行此操作后，您可以使用常规的 e.stopPropagation();和 e.preventDefault();在函数中并使用 $( this ) 采取行动，这样你就可以挑出你点击的 dom 元素。