jquery選擇器之間的區別

在爲站點設置ajaxnavigation時，我遇到了jQuery選擇器的問題。該網站基於twitter引導，並使用框架提供的導航欄和下拉菜單。jquery選擇器之間的區別

當點擊鏈接class="ajaLink"時，我使用hashchange事件將新內容加載到section#main中。

我被卡住了，因爲它似乎事件不會綁定到twitter引導下拉菜單中的鏈接。我調查了JS的下拉菜單，但我看不到任何會阻止事件被綁定和觸發的事件。

在無奈我從

$(document).on('click', '.ajaxLink', function (e) { 
    ... 
}

chanegd選擇要

$('.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; 
});

來源

2012-08-26 P-H

較短，但重複的http：//計算器。com/a/8111171/1478467 – Sherbrow

考慮到這不是真的重複。雖然這對選擇器之間的區別有很好的解釋。但是爲什麼'$（document）.on（'click'，'.ajaxLink'，function（）{..}）;'不會綁定到主要加載的內容，但只限於動態加載？所以兩個選擇器之間的區別被清除了，但問題的第二部分不是。我的最終解決方案讓我有信心不多次綁定，如下所示：'$（'header，＃main'）。on（'click'，'.ajaxLinl'，function（）{..}）;'A代表我進行了很多編輯。 –

不同的是，$('.ajaxLink').on('click', function (e) { ... }只結合已經存在的元素。

$(document).on('click', '.ajaxLink', function (e) { ... }具有委託並還結合了在未來的動態創建.ajaxLink元件。

如果你想要一個代表你真的應該使用父更接近於子元素比document。原因是在DOM樹中節省了不必要的搜索，從而提供了更好的性能。

來源

2012-08-26 10:08:16 sQVe

謝謝，經過五秒鐘的思考，這是有道理的。但是，仍然爲什麼$（document）.on（'click'，'.ajaxLink'，function（e）{...}綁定到導航欄菜單中的現有元素？ –

@PH不確定，可能是你可能會創建一個jsfiddle來演示這個問題嗎？ – sQVe

我以前沒用過jsfiddle，但我會試一試... –

從我從JQuery docs讀，似乎$('.ajaxLink')返回所有的電流匹配DOM元素的數組，然後on('click')獲取綁定，一旦到陣列中的每個項目，而$(document).on(’click')被調用任何時候任何後代的文件被點擊，然後只有在匹配通過.on()方法傳遞的filert時纔會被執行。記住

就這樣，你也可以嘗試以下方法：

$(".dropdown-menu").on("click", ".ajaxLink", function(e) { ... });

來源

2012-08-26 10:22:49

是的，這是我解釋sqve的答案的方式。但對我來說，這意味着$（document）.on（'click'）'會附加到主要加載文檔中的每個鏈接，並且_also_附加到動態加載的內容。但它不會附加到主要加載內容中的鏈接。這是讓我想知道的。 –

jquery選擇器之間的區別

回答

相關問題