Calling a function that resides in the main page from a plugin?

Question

I want to call a function from within plugin, but the function is on the main page and not the plugin's .js file.

EDIT

I have jQuery parsing a very large XML file and building, subsequently, a large list (1.1 MB HTML file when dynamic content is copied, pasted, then saved) that has expand/collapse functionality through a plugin. The overall performance on IE is super slow and doggy, assuming since the page/DOM is so big.

I am currently trying to save the collapsed content in the event.data when it is collapsed and remove it from the DOM, then bring it back when it is told to expand... the issue that I am having is that when I bring the content back, obviously the "click" and "hover" events are gone. I'm trying to re-assign them, currently doing so inside the plugin after the plugin expands the content. The issue then though is that is says the function that I declare within the .click() is not defined. Also the hover event doesn't seem to be re-assigning either....

if ($(event.data.trigger).attr('class').indexOf('collapsed') != -1 ) {  //  if expanding
  // console.log(event.data.targetContent);
   $(event.data.trigger).after(event.data.targetContent);
   $(event.data.target).hide();

/*  This Line --->*/ $(event.data.target + 'a.addButton').click(addResourceToList);

   $(event.data.target + 'li.resource')
    .hover(
     function() {
      if (!($(this).attr("disabled"))) {
       $(this).addClass("over");
       $(this).find("a").css({'display':'block'});
      } 

     },
     function () {
      if (!($(this).attr("disabled"))) {
       $(this).removeClass("over");
       $(this).children("a").css({'display':'none'});
      } 
     }
    );
   $(event.data.target).css({
           "height": "0px",
           "padding-top": "0px",
           "padding-bottom": "0px",
           "margin-top": "0px",
           "margin-bottom": "0px"});
   $(event.data.target).show();
   $(event.data.target).animate({
           height: event.data.heightVal + "px",
           paddingTop: event.data.topPaddingVal + "px",
           paddingBottom: event.data.bottomPaddingVal + "px",
           marginTop: event.data.topMarginVal + "px",
           marginBottom: event.data.bottomMarginVal + "px"}, "normal");//, function(){$(this).hide();});
   $(event.data.trigger).removeClass("collapsed");  
   $.cookies.set('jcollapserSub_' + event.data.target, 'expanded', {hoursToLive: 24 * 365});
  } else if ($(event.data.trigger).attr('class').indexOf('collapsed') == -1 ) {  //  if collapsing
   $(event.data.target).animate({
           height: "0px",
           paddingTop: "0px",
           paddingBottom: "0px",
           marginTop: "0px",
           marginBottom: "0px"}, "normal", function(){$(this).hide();$(this).remove();});
   $(event.data.trigger).addClass("collapsed");  
   $.cookies.set('jcollapserSub_' + event.data.target, 'collapsed', {hoursToLive: 24 * 365});
  }

EDIT

So, having new eyes truly makes a difference. As I was reviewing the code in this post this morning after being away over the weekend, I found where I had err'd.

This:

$(event.data.target + 'a.addButton').click(addResourceToList);

Should be this (notice the space before a.addbutton):

$(event.data.target + ' a.addButton').click(addResourceToList);

Same issue with the "li.resource". So it was never pointing to the right elements... Thank you, Rene, for your help!!

Answer 1

I guess you should pass your function to the plugin as some argument, so it can call it.

// inside your plugin:
$.yourPlugin = function(f) {
  f();
}

// on the main page
$.yourPlugin(yourFunction);

Other possibility would be to call a global function by name, but a plugin shouldn't rely on your own global function to exist.

Or provide some more context to your question, as your current description is way too brief.

Answer 2

It seems to me, that this plugin should be responsible for adding the events at the first place and then it can re-add them when necessary.

But when these click and hover events are really external to plugin, then you might want to take a look at jQuery live events.