0
사이트의 ajax 탐색을 설정할 때 jQuery 선택기에 문제가 발생했습니다. 사이트는 트위터 부트 스트랩을 기반으로하며 프레임 워크에서 제공하는 탐색 모음 및 드롭 다운을 사용합니다.jquery 선택자의 차이점
class="ajaLink"의 링크를 클릭하면 hashchange 이벤트를 사용하여 section#main에 새 콘텐츠를로드합니다.
이벤트가 트위터 부트 스트랩 드롭 다운 메뉴의 링크에 바인딩되지 않는 것처럼 보였습니다. 나는 드롭 다운에 대한 JS를 조사했지만 이벤트가 묶이고 트리거되는 것을 막을 수있는 것을 볼 수 없었다. 좌절에서
나는 이것은 탐색 바, 드롭 다운에있는 모든 링크 이벤트 바인딩을 만든
$('.ajaxLink').on('click', function (e) {
...
}
에
$(document).on('click', '.ajaxLink', function (e) {
...
}
에서 선택을 chanegd 만의 링크를 떠날 것이다 동적으로로드 된 콘텐츠
두 개의 선택자 사이의 차이점을 알아낼 수 없으며이 동작을하는 이유는 무엇입니까? 내 솔루션 지금까지 두 선택기를 사용하는 것입니다하지만이 doesnt 솔루션으로 같은 느낌이 오랫동안 같은 이벤트에 대한 두 번 같은 요소를 바인딩 할 수 없습니다.
그래서 두 개의 선택기 사이의 차이점은 무엇입니까? 각 .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>
자바 스크립트
//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;
});
짧은하지만 HTTP를 복제 : // 유래.com/a/8111171/1478467 – Sherbrow
이 문제는 실제로 중복되지 않습니다. 그 이유는 선택자 사이의 차이점에 대한 좋은 설명이 있습니다.하지만 왜 '$ (document) .on ('click ','.ajaxLink ', function() {..}); ,하지만 동적으로로드? 그래서 두 선택자 사이의 차이는 없지만 질문의 두 번째 부분은 없습니다. 마지막 바인딩은 여러 번 묶어 두지 않는다고 확신하게 만들었습니다. $ ('header, # main'). on ('click', '.ajaxLinl', function() {..}); 이 일을 제 편으로 많이했습니다. –