Question

所以我的导航栏中有一个嵌套的bootstrap下拉列表。以下是阻止单击嵌套drop以执行其正常任务的下拉列表的代码。这很有效。

(function($) {
    $(document).ready(function() {

        $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            $(this).parent().siblings().removeClass('open');
            $(this).parent().toggleClass('open');
        });
    });
})(jQuery);

在此代码中，下拉列表onclick的{{1}}会执行某些操作。当点击位于下拉列表的正常<li>时，它可以正常工作，但当它处于嵌套下拉列表中时，该函数会被执行但是当它结束时它会再次执行（onClick）。我发现的方式是为了避免其完整的第二次执行，我在if语句中li if（点击的$(this)）是li，这就是它是第二次不知从何而来。这种方式非常粗略，但它有效，但是有没有人知道为什么第二次调用该方法以及如何阻止它被调用两次？

null

这是我的HTML下拉列表。

$("#dropdownViewModeSelect").on('click', 'li', function() {

    selectedViewMode = $(this).attr("viewmode");

    if (selectedViewMode != "undefined" && selectedViewMode != null) 
    {
        if (selectedViewMode != previouslySelectedViewMode || currentTimelineMode != previouslySelectedTimelineMode) 
        {
            //Remove glyphicons to all i
            var touslesideslis = $("#dropdownViewModeSelect li").find("i").removeClass('glyphicon glyphicon-ok');
            //Add glyphicons to clicked i
            $(this).find("i").addClass('glyphicon glyphicon-ok');
            //Add text to button
            currentViewModeSecondary = $(this).attr("viewmodesecondary");
            var textBtn;
            if (currentViewModeSecondary != "classic")
                textBtn = "Ligne du temps - " + $(this).text();
            else
                textBtn = $(this).text();

            $("#dropdownMenuViewMode").text(textBtn);
            $("#dropdownMenuViewMode").append('<span class="glyphicon glyphicon-eye-open pull-left"></span>');
            $("#dropdownMenuViewMode").append('<span class="caret caret-filter"></span>');
            if ($(window).width() >= 768)
                Global.Responsiveness();
        }
    }

});

Answer 1

如果你的点击处理程序被调用两次，它可能被设置两次。尝试更改选择器。这可能不是您想要的最终类结构，但是如果您为每个列表元素添加相同的类，然后在选择器中使用该类来解决问题所在的点击处理程序，那么我会打赌。

jQuery方法调用了两次？

1 个答案: