在为站点设置 ajaxnavigation 时,我遇到了 jQuery 选择器的问题。该站点基于 twitter 引导程序,并使用框架提供的导航栏和下拉菜单。
section#main
单击链接时,我使用 hashchange 事件将新内容加载到其中class="ajaLink"
。
我被卡住了,因为该事件似乎不会绑定到 twitter 引导下拉菜单中的链接。我调查了下拉列表的 JS,但我看不到任何会阻止事件被绑定和触发的东西。
沮丧地我改变了选择器
$(document).on('click', '.ajaxLink', function (e) {
...
}
到
$('.ajaxLink').on('click', function (e) {
...
}
这使得事件绑定到导航栏和下拉列表中的所有链接,但会将链接保留在动态加载的内容中。
我无法弄清楚这两个选择器之间的区别以及为什么会出现这种行为。到目前为止,我的解决方案是同时使用这两个选择器,但只要我不能确定事件不会两次绑定到同一个元素,这感觉不是一种解决方案。
那么问题是使用的两个选择器之间有什么区别?我将如何重写选择器以确保我.ajaLink
只绑定每个元素一次?
的HTML...
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<header>
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<!-- Minimizing the menu under a button when screen gets too small. -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
...
</a>
<div class="nav-collapse">
<ul class="nav">
<!-- Choose application. -->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"> Menu 1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><a class="ajaxLink" href="/Blabla">Blabla</a></li>
<li class=""><a class="ajaxLink" href="/Yadayada">Yadayada</a></li>
...
</ul>
</li>
<!-- Choose application. -->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"> Menu 2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><a class="ajaxLink" href="/Blabla2">Blabla 2</a></li>
<li class=""><a class="ajaxLink" href="/Yadayada2">Yadayada 2</a></li>
...
</ul>
</li>
</ul>
<form class="navbar-search pull-right" action="/Home/Search" method="post" >
<input type="search" class="search-query" placeholder="Sök" />
<button type="submit" class="btn btn-inverse" id="search-button ">Search</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</header>
<div class="log label label-important" style="display:none;" ></div>
<section id="main" style="opacity: 1; ">
<div class="row-fluid">
<div class="span2">
</div>
<div class="span10">
<span class="gradientlabel"><a href="#">Artiklar</a></span>
<table class="table table-striped table-bordered table-condensed overview-table">
<tbody><tr>
<th>
Art No.
</th>
<th>
Description
</th>
<th>
Price
</th>
<th></th>
</tr>
<tr>
<td>
16791
</td>
<td style="overflow:hidden;white-space: nowrap;">
175/70-13 82Q Semperit Ice Grip 2 Dubbat
</td>
<td>
300
</td>
<td>
<a class="ajaxLink" href="/Artiklar/Edit/16791">Edit</a>
</td>
</tr>
<tr>
<td>
16792
</td>
<td style="overflow:hidden;white-space: nowrap;">
195/55-15 85Q Uniroyal Nordic Dubbat
</td>
<td>
550
</td>
<td>
<a class="ajaxLink" href="/Artiklar/Edit/16792">Edit</a>
</td>
</tr>
...
</tbody></table>
</div>
</div>
</section>
<footer>
</footer>
</div>
</body>
</html>
Javascript
//Add event for all ajaxLink (except for the ones in the bootstrap dropdown)
$(document).on('click', '.ajaxLink', function (e) {
var self = $(this);
if (self.attr('href').length > 2) {
window.location.hash = "!" + self.attr('href');
}
return false;
});
//I dont really know yet, but this is the only way to attach the event to bootstraps dropdown, and also have to close the dropdown programmatically.
$('.ajaxLink').on('click', function (e) {
var self = $(this);
//if (self.prop('tagName') != 'A') { alert('not a link'); self = self.find('a:first'); }
if (self.attr('href').length > 2) {
window.location.hash = "!" + self.attr('href');
}
self.closest('.dropdown').removeClass('open');
return false;
});