我有一个奇怪的问题，我在document.ready或window.load中定义了一组事件侦听器，当我加载页面并尝试触发其中一个时，没有任何反应。
我首先想到它可能是一个DOM问题，但是如果我console.log()我绑定一个监听器的每个元素，它就会成功记录，向我表明它不是DOM的问题。如果我将侦听器绑定到页面上的其他元素，那些似乎工作正常。如果我只是将下面的代码复制/粘贴到控制台中，一切正常。
我也尝试过不将它们包装在document.ready或window.load函数中，但这没什么区别。我试过调整脚本的位置。我把它放在头部，页脚和一个单独的文件中，通过Rails中的资产管道加载。同样，它没有任何区别。
在我的代码中，没有其他侦听器绑定到这些元素。我在这里缺少什么？
$(document).ready(function () {
// This console.log() statement returns the correct DOM element
console.log($('#direct-apply-btn'));
// As does this 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');
});
// This listener works fine.
$('.header').click(function(){
$(this).css('background','red');
});
});
更新
我想出了一个让事件监听器触发的黑客攻击。这是一个小小的车，但它总比没有好。见下面的代码。我仍然真的希望找出为什么$(document).ready或$(window).load不适合我。下面的代码似乎触发了所有的事件监听器，但它不是我的应用程序的长期解决方案，它不适用于移动设备。
$(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');
});
};
更新2 以下是事件侦听器应绑定到的DOM的呈现部分：
<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 this search
</div>
</div>
<div class="filter-button-container">
<div class="filter-button" ng-show="savedSearches.length > 0" ng-click="openSavedSearches()" style="">
My 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 Now & 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>
答案 0 :(得分：0)
根据我对该问题的理解，您的问题在于Javscript评论。
Javascript评论不以“＃”开头，而是以“//”开头，单行评论和/ ** /用于多行评论。
$(document).ready(function () {
// This console.log() statement returns the correct DOM element
console.log($('#direct-apply-btn'));
// As does this 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');
});
});