サイトのajaxnavigationを設定するときに、jQueryセレクターで問題が発生しました。このサイトはTwitterのブートストラップに基づいており、フレームワークが提供するナビゲーションバーとドロップダウンを使用しています。
ハッシュチェンジイベントを使用してsection#main、リンクclass="ajaLink"がクリックされたときに新しいコンテンツをロードします。
イベントがTwitterのブートストラップドロップダウンメニューのリンクにバインドされていないようだったので、行き詰まりました。ドロップダウンについてJSを調査しましたが、イベントがバインドおよびトリガーされるのを妨げるものは何も見つかりませんでした。
欲求不満で私はセレクターをから変更しました
$(document).on('click', '.ajaxLink', function (e) {
...
}
に
$('.ajaxLink').on('click', function (e) {
...
}
これにより、イベントはナビゲーションバーとドロップダウンのすべてのリンクにバインドされますが、動的に読み込まれるコンテンツにはリンクが残ります。
2つのセレクターの違いと、なぜこの動作が発生するのか理解できません。これまでの私の解決策は両方のセレクターを使用することですが、イベントが同じ要素に2回バインドされないことを確認できない限り、これは解決策としては感じられません。
では、使用されている2つのセレクターの違いは何ですか？.ajaLink各要素を1回だけバインドするようにセレクターを書き直すにはどうすればよいですか？
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;
});