Dynamically loaded content cause fancy box event to break

Question

I have a main page that I am populating with different content based on user selection through Ajax call. I am using Fancy Box that breaks as soon as the page loads the content post Ajax call. I've read all about using .on() but can't seem to get it to work. I am no expert at this kind of stuff in the least.

Here is what I would normally do, that works, prior to Ajax:

    <script>
      $(document).ready(function() {            

    $("#june3a, #june3b, #june3c ").fancybox({
      'titlePosition'       : 'inside',
      'transitionIn'        : 'none',
      'transitionOut'       : 'none'
    });         

  });
  </script>

and here is what I have trying to use the .on() WHICH doesn't work:

    <script>
      $(document).on("click", function() {          

    $("#june3a, #june3b, #june3c ").fancybox({
      'titlePosition'       : 'inside',
      'transitionIn'        : 'none',
      'transitionOut'       : 'none'
    });         

  });
  </script>

Any help would be awesome.

Call `$("#june3a, #june3b, #june3c ").fancybox({...})` in the ajax `success` callback. — The Alpha, May 23 '13 at 02:05
If you are using fancybox v1.3.4, check this http://stackoverflow.com/a/9084293/1055987 — JFK, May 23 '13 at 03:14
possible duplicate of [how to bind fancybox to dynamic added element?](http://stackoverflow.com/questions/9081571/how-to-bind-fancybox-to-dynamic-added-element) — JFK, May 23 '13 at 03:15

Igor Martins · Answer 1 · 2013-05-23T15:24:59.540

-1

$(document) must to be a link or something else.

Try like this:

   <script>
  $(document).(function() {          
 $("#object").click(function() {
$("#june3a, #june3b, #june3c ").fancybox({
  'titlePosition'       : 'inside',
  'transitionIn'        : 'none',
  'transitionOut'       : 'none'
});   
}


});

Substitute #object with the element for the click.

edited May 23 '13 at 15:24

answered May 23 '13 at 01:58

Igor Martins

2,015
7
36
57

Clean up your code : the `click()` method is not properly closed (apart that it doesn't work) – JFK May 23 '13 at 16:41

Dynamically loaded content cause fancy box event to break

1 Answers1