Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <blockquote> <p><strong>Warning</strong>: This answer is old. <strong>Still very useful</strong>, but <code>live</code> has been deprecated and removed in newer versions of jQuery. So read the answer, because the use cases haven't changed, and you will learn why and when to use less event handlers. But unless you are still using a really old version of jQuery (v1.4.2 or prior), you should considerer writing the new equivalent code instead. As documented in the <a href="http://api.jquery.com/live/#entry-longdesc" rel="nofollow noreferrer">jQuery API for <code>live</code></a> and copied here:</p> <blockquote> <p>Rewriting the <code>.live()</code> method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:</p> <ol> <li><code>$( selector ).live( events, data, handler ); // jQuery 1.3+</code></li> <li><code>$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+</code></li> <li><code>$( document ).on( events, selector, data, handler ); // jQuery 1.7+</code></li> </ol> </blockquote> </blockquote> <p>Sometimes you have a set of elements when the page loads, like, say, edit links:</p> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;td&gt;Item 1&lt;/td&gt; &lt;td&gt;&lt;a href="#" class="edit"&gt;Edit&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Item 2&lt;/td&gt; &lt;td&gt;&lt;a href="#" class="edit"&gt;Edit&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Item 3&lt;/td&gt; &lt;td&gt;&lt;a href="#" class="edit"&gt;Edit&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>Now, maybe you have something like this with jQuery:</p> <pre><code>$(document).ready(function() { $('a.edit').click(function() { // do something return false; }); }); </code></pre> <p>But what if you add a new element to this table dynamically, after the page has initially loaded?</p> <pre><code>$('table').append(' &lt;tr&gt;&lt;td&gt;Item 4&lt;/td&gt;&lt;td&gt;&lt;a href="#" class="edit"&gt;Edit&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt; '); </code></pre> <p>When you click on "Edit" on this new Item, nothing will happen because the events were bound on page load. Enter live. With it, you can bind the event above like this:</p> <pre><code>$(document).ready(function() { $('a.edit').live('click', function() { // do something return false; }); }); </code></pre> <p>Now if you add any new <code>&lt;a&gt;</code> elements with a class of <code>edit</code> after the page has initially loaded, it will still register this event handler.</p> <p>But how is this accomplished?</p> <p>jQuery uses what is known as event delegation to achieve this functionality. Event delegation is helpful in this situation or when you want to load a large amount of handlers. Say you have a DIV with images:</p> <pre><code>&lt;div id="container"&gt; &lt;img src="happy.jpg"&gt; &lt;img src="sad.jpg"&gt; &lt;img src="laugh.jpg"&gt; &lt;img src="boring.jpg"&gt; &lt;/div&gt; </code></pre> <p>But instead of 4 images, you have 100, or 200, or 1000. You want to bind a click event to images so that X action is performed when the user clicks on it. Doing it as you might expect...</p> <pre><code>$('#container img').click(function() { // do something }); </code></pre> <p>...would then bind hundreds of handlers that all do the same thing! This is inefficient and can result in slow performance in heavy webapps. With event delegation, even if you don't plan on adding more images later, using live can be much better for this kind of situation, as you can then bind <strong>one</strong> handler to the container and check when it is clicked if the target was an image, and then perform an action:</p> <pre><code>// to achieve the effect without live... $('#container').click(function(e) { if($(e.target).is('img')) { performAction(e.target); } }); // or, with live: $('img', '#container').live('click', function() { performAction(this); }); </code></pre> <p>Since jQuery knows that new elements can be added later on or that performance is important, instead of binding an event to the actual images, it might add one to the div like in the first example (in reality, I'm pretty sure it binds them to the body but it might to the container in the example above) and then delegate. This <code>e.target</code> property can let it check after the fact if the event that was clicked/acted on matches the selector that you might have specified.</p> <p>To make it clear: this is helpful not only in the direct way of not having to rebind events, but it can be dramatically faster for a large amount of items.</p>
    singulars
    1. This table or related slice is empty.
    1. POUsing live() - benefits - similar to bind()
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USMariano Desanze
    1. USPaolo Bergantino
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POUsing live() - benefits - similar to bind()
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAh I see! That makes it much clearer, I am going to play around with a dummy page to see what it brings up.
      singulars
      1. PO
      1. USCoughlin
    2. COyou are good man in explaning stuffs; you should be a teacher or something!
      singulars
      1. PO
      1. USShiva
    3. COCheck a generic benchmark of live vs. bind http://stackoverflow.com/questions/2690370/live-vs-bind/7692651#7692651
      singulars
      1. PO
      1. USWatermark Studios
 

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