jQuery event listeners only work in console -
i have strange problem define set of event listeners inside document.ready or window.load , nothing happens when load page , try trigger 1 of them.
i first thought might dom issue, if console.log() each element i'm binding listener to, logged successfully, indicating me it's not problem dom. if bind listeners other elements on page, seem work fine. if copy/paste code below console, works fine.
i've tried not wrapping them in document.ready or window.load function, makes no difference. i've tried adjusting location of script. i've placed in head, footer, , in separate file loaded through asset pipeline in rails. again, makes no difference.
there no other listeners tied these elements anywhere in code. missing here?
$(document).ready(function () { // console.log() statement returns correct dom element console.log($('#direct-apply-btn')); // one: console.log($('[data-toggle="popover-filter"]')); var popovertextfilter = "some text here."; var popovertextbutton = "some other text here."; $('[data-toggle="popover-filter"]').popover({ delay: {show: "500", hide: "100"}, content: popovertextfilter, trigger: "hover", placement: "top" }); $('[data-toggle="popover-btn"]').popover({ delay: {show: "500", hide: "100"}, content: popovertextbutton, trigger: "hover", placement: "top" }); if(location.hash.includes('direct_apply')) { $('.direct-apply-filter').addclass('direct-apply-btn-active'); $('.direct-apply-text').addclass('direct-apply-btn-active'); } $('#direct-apply-btn').click(function() { $('.direct-apply-filter').toggleclass('direct-apply-btn-active'); $('.direct-apply-text').toggleclass('direct-apply-btn-active'); }); $('.clear-filters-btn').click(function(){ $('.direct-apply-filter').removeclass('direct-apply-btn-active'); $('.direct-apply-text').removeclass('direct-apply-btn-active'); }); // listener works fine. $('.header').click(function(){ $(this).css('background','red'); }); }); update
i came hack gets event listeners trigger. it's little buggy, it's better nothing. see code below. i'm still hoping find out why $(document).ready or $(window).load wouldn't work me. code below seems trigger event listeners, it's not long-term solution app , doesn't work on mobile.
$(document).scroll(function(){ directapplyeventlisteners(); }); function directapplyeventlisteners() { var popovertextfilter = "some text here."; var popovertextbutton = "some other text here."; datatoggles(); $('.search-results').bindwithdelay('domsubtreemodified', function() { datatoggles(); }); function datatoggles() { $('[data-toggle="popover-filter"]').popover({ delay: {show: "500", hide: "100"}, content: popovertextfilter, trigger: "hover", placement: "top" }); $('[data-toggle="popover-btn"]').popover({ delay: {show: "500", hide: "100"}, content: popovertextbutton, trigger: "hover", placement: "top" }); }; if(location.hash.includes('direct_apply')) { $('.direct-apply-filter').addclass('direct-apply-btn-active'); $('.direct-apply-text').addclass('direct-apply-btn-active'); } $('#direct-apply-btn').click(function() { $('.direct-apply-filter').toggleclass('direct-apply-btn-active'); $('.direct-apply-text').toggleclass('direct-apply-btn-active'); }); $('.clear-filters-btn').click(function(){ $('.direct-apply-filter').removeclass('direct-apply-btn-active'); $('.direct-apply-text').removeclass('direct-apply-btn-active'); }); }; update 2 here rendered portion of dom event listeners should bound to:
<div class="filters ng-scope full-dna-search" ng-class="{'full-dna-search':fulldnasearch}" ng-controller="filtersctrl"> <div class="filter-container r1"> <div class="filter-label basic-search">basic search</div> <div class="dropdown ng-isolate-scope" dropdown="" name="citydropdown.name" items="citydropdown.items" category="citydropdown.category"> <div class="filter-button" ng-click="togglemenu()"> <span class="text ng-binding">city</span><i class="fa fa-chevron-down"></i> </div> <div class="dd_arrow filter ng-hide" ng-show="menuvisible"></div> <div class="dropdown-directive-menu ng-hide" ng-show="menuvisible"> <a class="clear-btn" ng-click="clearallitems(); $event.stoppropagation();"><span ng-show="hasfiltereditems" class="ng-hide">clear all</span></a> <form name="dropdown_form" class="ng-pristine ng-valid"> </form> </div> </div> <div class="dropdown ng-isolate-scope" dropdown="" name="industrydropdown.name" items="industrydropdown.items" category="industrydropdown.category"> <div class="filter-button" ng-click="togglemenu()"> <span class="text ng-binding">industry</span><i class="fa fa-chevron-down"></i> </div> <div class="dd_arrow filter ng-hide" ng-show="menuvisible"></div> <div class="dropdown-directive-menu ng-hide" ng-show="menuvisible"> <a class="clear-btn" ng-click="clearallitems(); $event.stoppropagation();"><span ng-show="hasfiltereditems" class="ng-hide">clear all</span></a> <form name="dropdown_form" class="ng-pristine ng-valid"> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">financial</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">marketing</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">technology</span> </div> </div> </form> </div> </div> <div class="dropdown ng-isolate-scope" dropdown="" name="sizedropdown.name" items="sizedropdown.items" category="sizedropdown.category"> <div class="filter-button" ng-click="togglemenu()"> <span class="text ng-binding">size</span><i class="fa fa-chevron-down"></i> </div> <div class="dd_arrow filter ng-hide" ng-show="menuvisible"></div> <div class="dropdown-directive-menu ng-hide" ng-show="menuvisible"> <a class="clear-btn" ng-click="clearallitems(); $event.stoppropagation();"><span ng-show="hasfiltereditems" class="ng-hide">clear all</span></a> <form name="dropdown_form" class="ng-pristine ng-valid"> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">1-10 employees</span> </div> </div> </form> </div> </div> <div class="dropdown ng-isolate-scope" dropdown="" name="jfuncdropdown.name" items="jfuncdropdown.items" category="jfuncdropdown.category"> <div class="filter-button" ng-click="togglemenu()"> <span class="text ng-binding">job function</span><i class="fa fa-chevron-down"></i> </div> <div class="dd_arrow filter ng-hide" ng-show="menuvisible"></div> <div class="dropdown-directive-menu ng-hide" ng-show="menuvisible"> <a class="clear-btn" ng-click="clearallitems(); $event.stoppropagation();"><span ng-show="hasfiltereditems" class="ng-hide">clear all</span></a> <form name="dropdown_form" class="ng-pristine ng-valid"> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">customer support</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">engineering</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">it</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">management</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">marketing</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">sales</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">tech support</span> </div> </div> </form> </div> </div> <div class="dropdown ng-isolate-scope ng-hide" dropdown="" name="experiencedropdown.name" items="experiencedropdown.items" category="experiencedropdown.category" ng-hide="true"> <div class="filter-button" ng-click="togglemenu()"> <span class="text ng-binding">experience level</span><i class="fa fa-chevron-down"></i> </div> <div class="dd_arrow filter ng-hide" ng-show="menuvisible"></div> <div class="dropdown-directive-menu ng-hide" ng-show="menuvisible"> <a class="clear-btn" ng-click="clearallitems(); $event.stoppropagation();"><span ng-show="hasfiltereditems" class="ng-hide">clear all</span></a> <form name="dropdown_form" class="ng-pristine ng-valid"> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">internship</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">entry level</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">mid level</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">senior level</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">manager</span> </div> </div> </form> </div> </div> <div class="dropdown ng-isolate-scope" data-toggle="popover-filter" filterbutton="" name="directapplybutton.name" data-original-title="" title=""> <div id="direct-apply-btn" class="filter-button" ng-click="showdirectapply = !showdirectapply; togglefilter(showdirectapply); $event.stoppropagation();"> <div class="direct-apply-filter"><i class="fa fa-check"></i></div> <span class="direct-apply-text text ng-binding">directapply<span class="tm">tm</span></span> </div> </div> <div class="right-buttons"> <div class="filter-button-container"> <div class="filter-button ng-hide" ng-show="filtersapplied || !signedin" ng-click="opensavesearchconf()"> save search </div> </div> <div class="filter-button-container"> <div class="filter-button" ng-show="savedsearches.length > 0" ng-click="opensavedsearches()" style=""> saved searches </div> </div> </div> </div> <div class="filter-label workplace-dna">workplace<span class="itlc">dna</span><span class="tm">tm</span></div> <div class="dropdown ng-isolate-scope" dropdown="" name="workstyledropdown.name" items="workstyledropdown.items" category="workstyledropdown.category"> <div class="filter-button" ng-click="togglemenu()"> <span class="text ng-binding">work style</span><i class="fa fa-chevron-down"></i> </div> <div class="dd_arrow filter ng-hide" ng-show="menuvisible"></div> <div class="dropdown-directive-menu ng-hide" ng-show="menuvisible"> <a class="clear-btn" ng-click="clearallitems(); $event.stoppropagation();"><span ng-show="hasfiltereditems" class="ng-hide">clear all</span></a> <form name="dropdown_form" class="ng-pristine ng-valid"> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">cooperative & collaborative</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">competitive & risk-taking</span> </div> </div> </form> </div> </div> <div class="dropdown ng-isolate-scope" dropdown="" name="pacedropdown.name" items="pacedropdown.items" category="pacedropdown.category"> <div class="filter-button" ng-click="togglemenu()"> <span class="text ng-binding">pace</span><i class="fa fa-chevron-down"></i> </div> <div class="dd_arrow filter ng-hide" ng-show="menuvisible"></div> <div class="dropdown-directive-menu ng-hide" ng-show="menuvisible"> <a class="clear-btn" ng-click="clearallitems(); $event.stoppropagation();"><span ng-show="hasfiltereditems" class="ng-hide">clear all</span></a> <form name="dropdown_form" class="ng-pristine ng-valid"> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">steady & predictable</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">fast & unpredictable</span> </div> </div> </form> </div> </div> <div class="dropdown ng-isolate-scope" dropdown="" name="feedbackmentoringdropdown.name" items="feedbackmentoringdropdown.items" category="feedbackmentoringdropdown.category"> <div class="filter-button" ng-click="togglemenu()"> <span class="text ng-binding">feedback & mentoring</span><i class="fa fa-chevron-down"></i> </div> <div class="dd_arrow filter ng-hide" ng-show="menuvisible"></div> <div class="dropdown-directive-menu ng-hide" ng-show="menuvisible"> <a class="clear-btn" ng-click="clearallitems(); $event.stoppropagation();"><span ng-show="hasfiltereditems" class="ng-hide">clear all</span></a> <form name="dropdown_form" class="ng-pristine ng-valid"> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">informal & on-the-fly</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">structured & regular</span> </div> </div> </form> </div> </div> <div class="dropdown ng-isolate-scope" dropdown="" name="dresscodedropdown.name" items="dresscodedropdown.items" category="dresscodedropdown.category"> <div class="filter-button" ng-click="togglemenu()"> <span class="text ng-binding">dress code</span><i class="fa fa-chevron-down"></i> </div> <div class="dd_arrow filter ng-hide" ng-show="menuvisible"></div> <div class="dropdown-directive-menu ng-hide" ng-show="menuvisible"> <a class="clear-btn" ng-click="clearallitems(); $event.stoppropagation();"><span ng-show="hasfiltereditems" class="ng-hide">clear all</span></a> <form name="dropdown_form" class="ng-pristine ng-valid"> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">business formal</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">business casual</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">casual</span> </div> </div> </form> </div> </div> <div class="dropdown ng-isolate-scope" dropdown="" name="eventsactivitiesdropdown.name" items="eventsactivitiesdropdown.items" category="eventsactivitiesdropdown.category"> <div class="filter-button" ng-click="togglemenu()"> <span class="text ng-binding">events & activities</span><i class="fa fa-chevron-down"></i> </div> <div class="dd_arrow filter ng-hide" ng-show="menuvisible"></div> <div class="dropdown-directive-menu ng-hide" ng-show="menuvisible"> <a class="clear-btn" ng-click="clearallitems(); $event.stoppropagation();"><span ng-show="hasfiltereditems" class="ng-hide">clear all</span></a> <form name="dropdown_form" class="ng-pristine ng-valid"> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">every & then</span> </div> </div> <div ng-repeat="i in items" class="ng-scope"> <div class="filter-item" ng-class="{selected: i.selected}" ng-click="toggleitem($index); $event.stoppropagation();"> <input type="checkbox" ng-model="i.selected" class="ng-pristine ng-valid"> <span class="text ng-binding">frequent</span> </div> </div> </form> </div> </div> <div class="right-buttons filter-right-buttons"> <a class="clear-filters-btn ng-hide" ng-show="filtersapplied" ng-click="clearallfilters()">clear filters</a> <a class="expand-filters-btn" ng-click="expandfilters()" ng-show="!expanded">all filters <i class="fa fa-search"></i></a> </div> </div>
as per understanding issue, problem javscript comments.
javascript comments doesn't start "#" rather starts "//" single line comment , /**/ multiline comments.
$(document).ready(function () { // console.log() statement returns correct dom element console.log($('#direct-apply-btn')); // one: console.log($('[data-toggle="popover-filter"]')); var popovertextfilter = "some text here."; var popovertextbutton = "some other text here."; $('[data-toggle="popover-filter"]').popover({ delay: {show: "500", hide: "100"}, content: popovertextfilter, trigger: "hover", placement: "top" }); $('[data-toggle="popover-btn"]').popover({ delay: {show: "500", hide: "100"}, content: popovertextbutton, trigger: "hover", placement: "top" }); if(location.hash.includes('direct_apply')) { $('.direct-apply-filter').addclass('direct-apply-btn-active'); $('.direct-apply-text').addclass('direct-apply-btn-active'); } $('#direct-apply-btn').click(function() { $('.direct-apply-filter').toggleclass('direct-apply-btn-active'); $('.direct-apply-text').toggleclass('direct-apply-btn-active'); }); $('.clear-filters-btn').click(function(){ $('.direct-apply-filter').removeclass('direct-apply-btn-active'); $('.direct-apply-text').removeclass('direct-apply-btn-active'); }); $('.header').click(function(){ $(this).css('background','red'); }); });
Comments
Post a Comment