Databases
StackOverflow2013
Postsdbo
PODifference between jquery selectors
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODifference between jquery selectors
    primarykey
    data
    text
    <p>I ran into a problem with jQuery selectors when setting up an ajaxnavigation for a site. The site is based on twitter bootstrap and uses the nav-bar and dropdowns provided by the framework. </p> <p>I use hashchange events to load new content into <code>section#main</code> when a link with <code>class="ajaLink"</code> is clicked. </p> <p>I got stuck as it seemed the event wouldn't bind to the links in the twitter bootstrap dropdown menu. I investigated the JS for the dropdowns but I couldn't see anything that would prevent the event from being bound and triggered. </p> <p>In frustration I chanegd the selector from </p> <pre><code>$(document).on('click', '.ajaxLink', function (e) { ... } </code></pre> <p>To</p> <pre><code>$('.ajaxLink').on('click', function (e) { ... } </code></pre> <p>This made the event bind to all the links in the nav-bar and dropdowns, but would leave the links in the dynamically loaded content.</p> <p>I can't figure out the difference between the two selectors and why I get this behaviour. My solution so far is to use both the selectors, but this doesnt feel as a solution as long as I cant tell for sure the event wont bind twice to the same element.</p> <p>So question is what is the difference between the two selectors used? How would I rewrite the selector to make sure I bind each <code>.ajaLink</code> element only once?</p> <p>The HTML...</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container"&gt; &lt;header&gt; &lt;div class="navbar navbar-inverse"&gt; &lt;div class="navbar-inner"&gt; &lt;div class="container"&gt; &lt;!-- Minimizing the menu under a button when screen gets too small. --&gt; &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt; ... &lt;/a&gt; &lt;div class="nav-collapse"&gt; &lt;ul class="nav"&gt; &lt;!-- Choose application. --&gt; &lt;li class="dropdown"&gt; &lt;a class="dropdown-toggle" href="#" data-toggle="dropdown"&gt; Menu 1 &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li class=""&gt;&lt;a class="ajaxLink" href="/Blabla"&gt;Blabla&lt;/a&gt;&lt;/li&gt; &lt;li class=""&gt;&lt;a class="ajaxLink" href="/Yadayada"&gt;Yadayada&lt;/a&gt;&lt;/li&gt; ... &lt;/ul&gt; &lt;/li&gt; &lt;!-- Choose application. --&gt; &lt;li class="dropdown"&gt; &lt;a class="dropdown-toggle" href="#" data-toggle="dropdown"&gt; Menu 2 &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li class=""&gt;&lt;a class="ajaxLink" href="/Blabla2"&gt;Blabla 2&lt;/a&gt;&lt;/li&gt; &lt;li class=""&gt;&lt;a class="ajaxLink" href="/Yadayada2"&gt;Yadayada 2&lt;/a&gt;&lt;/li&gt; ... &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;form class="navbar-search pull-right" action="/Home/Search" method="post" &gt; &lt;input type="search" class="search-query" placeholder="Sök" /&gt; &lt;button type="submit" class="btn btn-inverse" id="search-button "&gt;Search&lt;/button&gt; &lt;/form&gt; &lt;/div&gt;&lt;!--/.nav-collapse --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/header&gt; &lt;div class="log label label-important" style="display:none;" &gt;&lt;/div&gt; &lt;section id="main" style="opacity: 1; "&gt; &lt;div class="row-fluid"&gt; &lt;div class="span2"&gt; &lt;/div&gt; &lt;div class="span10"&gt; &lt;span class="gradientlabel"&gt;&lt;a href="#"&gt;Artiklar&lt;/a&gt;&lt;/span&gt; &lt;table class="table table-striped table-bordered table-condensed overview-table"&gt; &lt;tbody&gt;&lt;tr&gt; &lt;th&gt; Art No. &lt;/th&gt; &lt;th&gt; Description &lt;/th&gt; &lt;th&gt; Price &lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; 16791 &lt;/td&gt; &lt;td style="overflow:hidden;white-space: nowrap;"&gt; 175/70-13 82Q Semperit Ice Grip 2 Dubbat &lt;/td&gt; &lt;td&gt; 300 &lt;/td&gt; &lt;td&gt; &lt;a class="ajaxLink" href="/Artiklar/Edit/16791"&gt;Edit&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; 16792 &lt;/td&gt; &lt;td style="overflow:hidden;white-space: nowrap;"&gt; 195/55-15 85Q Uniroyal Nordic Dubbat &lt;/td&gt; &lt;td&gt; 550 &lt;/td&gt; &lt;td&gt; &lt;a class="ajaxLink" href="/Artiklar/Edit/16792"&gt;Edit&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; ... &lt;/tbody&gt;&lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;footer&gt; &lt;/footer&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The Javascript</p> <pre><code>//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 &gt; 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 &gt; 2) { window.location.hash = "!" + self.attr('href'); } self.closest('.dropdown').removeClass('open'); return false; }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKyle Lacy
    1. USP-H
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODifference between jquery selectors
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COShorter but duplicate http://stackoverflow.com/a/8111171/1478467
      singulars
      1. PODifference between jquery selectors
      1. USSherbrow
    2. COOn consideration this isn't really a duplicate. Though that has a nice explanation to the difference between the selectors.Bbut why will `$(document).on('click', '.ajaxLink', function(){..});` not bind to the primarily loaded content, but only to the dynamically loaded? So the difference between the two selectors are cleared, but the second part of the question isnt. My final solution that made me confident in not binding multiple times was the following selector: `$('header,#main').on('click', '.ajaxLinl', function(){..});` A lot of edits on this on my behalf.
      singulars
      1. PODifference between jquery selectors
      1. USP-H
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload