StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
9084293
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
4
CommunityOwnedDate
CreationDate
2012-01-31T17:42:57.530
FavoriteCount
0
LastActivityDate
2013-01-15T19:52:02.130
LastEditDate
2013-01-15T19:52:02.130
LastEditorUserId
1055987
OwnerUserId
1055987
ParentId
9081571
PostTypeId
2
Score
26
ViewCount
0
LastEditorDisplayName
text
Body
The easiest way to bind fancybox (v1.3.x) to dynamically added elements is: 1: Upgrade to jQuery v1.7.x (if you haven't yet) 2: Set your script using <a href="http://api.jquery.com/on/">jQuery API <code>on()</code></a> + the <code>focusin</code> event. To make it work you need to find the <code>parent</code> element of your elements with <code>class="ajaxFancyBox"</code> as per your code above (or the <code>parent</code> of the <code>parent</code> as you need it) and attach <code>jQuery on()</code> to it so for example, having this html: <pre><code><div id="container"> <a class="ajaxFancyBox" href="image01.jpg">open image 01</a> <a class="ajaxFancyBox" href="image02.jpg">open image 02</a> </div> </code></pre> .. we will apply <code>on()</code> and <code>focusin</code> event to the element with <code>id="container"</code> (the <code>parent</code>) as in the example above, like: <pre><code>$("#container").on("focusin", function(){ $("a.ajaxFancyBox").fancybox({ // fancybox API options here 'padding': 0 }); // fancybox }); // on </code></pre> You can apply any fancybox option as you need. Additionally you may have different scripts for different type of content (inside the <code>on()</code> method) like: <pre><code>$("#container").on("focusin", function(){ $("a.ajaxFancyBox").fancybox({ // fancybox API options here 'padding': 0 }); // fancybox $("a.iframeFancyBox").fancybox({ // fancybox API options here 'padding': 0, 'width': 640, 'height': 320, 'type': 'iframe' }); // fancybox }); // on </code></pre> IMPORTANT: the example above won't work like that on Chrome. The workaround is to add the <code>tabindex</code> attribute to all of your elements bound to fancybox like <pre><code><div id="container"> <a tabindex="1" class="ajaxFancyBox" href="image01.jpg">open image 01</a> <a tabindex="1" class="ajaxFancyBox" href="image02.jpg">open image 02</a> </div> </code></pre> that solves the issue and will work (as far as I know) in most browsers including IE7+. <a href="http://picssel.com/playground/jquery/jQueryON_13dec11.html">See my demo page here</a> UPDATE: March 07, 2012. I was told that this method only works when you add new content to the page but not when you replace the content of the page. The method actually works on either of the two scenarios mentioned above. Just make sure that the new replacing content is also loaded inside the container where you applied the <code>.on()</code> method. <a href="http://picssel.com/playground/jquery/jQueryONreplacingContent_07mar12.html">See demo</a> The <code>tabindex</code> workaround for Chrome also applies.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POHow to bind fancybox to dynamic added element?
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USJFK
UserOwnerUserId
1. USJFK
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POHow to bind fancybox to dynamic added element?
 singulars
 PostTypePostTypeId
 PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTAcceptedByOriginator
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId
1. This table or related slice is empty.

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.