After closing Fancybox 2 modal jQuery.fn.xxxx method can not be found anymore-Collection of common programming errors

2 years ago
admin
2 minutes

Here is the deal,

I am using the following:

  1. jQuery latest version (today is: May 16 2012);
  2. Fancybox version 2 jQuery plugin
  3. *.js file that contains all my jQuery [clicks, hover, change….] built-in functions and jQuery.fn.xxxx self-made functions;
  4. I am running my website on CakePHP 2.1.2 (localhost)

I created two jQuery functions:

  1. jQuery.fn.myFunction1 (check all checkboxes on the page); and
  2. jQuery.fn.MyFunction2 (uncheck all checkboxes on the page)

which works as expected before I click on this link shown below that is linked to my javascript file.

Click here

linked to:

    $(".group").fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : true,
    fitToView   : true,
    type        : 'ajax',
    closeClick  : false,
    openEffect  : 'fade',
    closeEffect : 'fade'    
});

After I close the modal (by clicking on the [x] image above that comes with the plugin) back and try to trigger the two functions jQuery.fn.myFunction1 and …Function2 again, they can not be found anymore! Really weird.

The console error is: Uncaught TypeError: Object [object Object] has no method ‘myFunction1’

Just for the record: All my *.js files are intact, they are properly connected with the page. Every other .click(function(){}); (change, dblClick, hover, …) works as expected, also the page is not being refreshed to another page or website. It’s on the same page prior to opening the modal. But again these two functions (jQuery.fn.myFunction1 and jQuery.fn.myFunction2) can not be found anymore.

Does anyone know what the problem here is?…Is this a bug on jQuery side or Fancybox 2 side? The most important question, how can I fix this? 🙂

Originally posted 2013-11-29 06:17:27.