i have assortment of divs each have identical dropdown menu. when active element on 1 of image icons (chevron down) i'm trying mimic click event. problem when function fires off, nothing?
html:
<div class="appexperience small-tile"> <div class="blue-bar"> <h2 class="tile-header">application experience</h2> <span class="dropdown hidden-xs"> <i class="tcm-chevron glyphicon glyphicon-chevron-down expand-icon dropdown-toggle" role="button" aria-labledby="expand application experience summary dropdown menu" ng-src="{{dropdown_appexperience}}" data-toggle="dropdown" tabindex="0" alt="expand application experience summary dropdown menu"></i> <ul class="dropdown-menu appexperience tilecontextmenu"> <li> list item 1 </li> <li> list item 2 </li> ... what i've tried:
$(window).on("keydown", function() { console.log(document.activeelement); console.log($(".glyphicon-chevron-down")[0]); if (document.activeelement === $(".glyphicon-chevron-down")[0]) { console.log("activeelement recognized!") $(".glyphicon-chevron-down")[0].focus( function() { $( ).trigger("click"); }); } });
you should know that
$(window).on("keydown", function() { … }); will register handler fire on every single keyboard action on entire page. if want limit tab, consider checking event.keycode === 9 or better event.key === 'tab'.
the following code has few issues:
if (document.activeelement === $(".glyphicon-chevron-down")[0]) { console.log("activeelement recognized!") $(".glyphicon-chevron-down")[0].focus(function() { $( ).trigger("click"); }); } }); - as @mike mccaughan pointed out in comment,
$(selector)[0]givehtmlelement, you're calling htmlelement.focus(), , not jquery.focus(). - if registering
focusevent handler successful, you'd end bunch of handlers being registered. because add listeners, never remove them. - this code checks if
.glyphicon-chevron-downactiveelemnt , if that's case, attempts addfocusevent listener. pointless, because @ point element has focus - that's why it's activeelement.
what goal "mimicing click event"?
