how to make a global function in jquery, and call it from another loaded page

Question

how to declare a global function in jquery, how do i call it from a page that was loaded in some div on that page using jquery's load() function.

the function is simple in 1st sub page

+-----------------------------------------------+
| main links                                    |
+-----------------------------------------------|
| +-------------------------------------------+ |
| |1st sub page (myfun function is here)      | |
| +-------------------------------------------+ |
| | +---------------------------------------+ | |
| | |                                       | | |
| | |                                       | | |
| | |                                       | | |
| | | mybutton clicked myfun called         | | |
| | |                                       | | |
| | +---------------------------------------+ | |
| +-------------------------------------------+ |
+-----------------------------------------------+

But when i click, nothing happens... here are both function

myfun

myfun(tab_index, acc_id){
    alert(tab_index +" | +" acc_id);
}

mybutton

$("#mybutton").click(function(){
    var $bottomLineBtn = $(this);
    $bottomLineBtn.parent().myfun('2','43234');
})

Can somebody please help me.. its too hard to find the solution.. i've been searching for 3 hours...

==================================================================================

updated

here is the detailed scenario

1. i'm working on some dynamic stuff using jquery
2. the first page contains 2 divs, ones id=menu and others id=subpage1,
3. i click on one link from #menu, a page is loaded into #subpage1.
4. there is again a page with 2 divs #menu2 and #subpage2
5. here i made a script that loads pages automatically to #subpage2 by taking only 1 parameter ....which is id of a listmenu.

6. this script is..

    $("#menu2 li").click(function(){
        $("#subpage2").load($(this).attr('page_link'));
      }
    }).filter('#menu2 li:eq(0)').click();
    

7. in the loaded page. at extreme bottom, i use 2 buttons, one button works fine, it calls the above function and change the value li:eq(1) .. that i did like this.

    $("#bottom_bar #backbtn").click(function(){
    var $bottomLineBtn = $(this);
    $bottomLineBtn.parent().parent().parent().find('#menu2 li:eq(1)').click();
    })

... but the other button doesn't work. i want to call a function that belongs with some divs in #subpage1. but can't access them. i put only a function, next to the above $("#menu2 li").click(function(){ function.

 myfun(tab_index, acc_id){
        alert(tab_index +" | +" acc_id);
    }

but i don't know how to call this function from the 2nd button loaded into #subpage2

does the above scenario make scene.. please try to understand me.. i'm not very good in description...

Answer 1

Why can't you put your function in an external .js file and then import it into your main page?

Answer 2

function setGlobalFunc()
{    
   window.myfunc = (function(){alert("o hai");});    
}    

setGlobalFunc();    
myfunc();    

Function created from within another function, still globaly accessible.

No jQuery required at all.

Answer 3

If content is loaded dynamically, events need to be hooked up using the .live() method

$("#mybutton").live("click", function() { /* code here */ });

Answer 4

The problem is that you chain the function as if it is part of jQuery, but you have not made it be a plugin to the jQuery.

you should call it like this

$("#mybutton").click(function(){
    // var $bottomLineBtn = $(this);
    // $bottomLineBtn.parent();
    myfun('2','43234');
})

---

or define your function as a plugin of jquery like

 $.fn.myfun = function(tab_index, acc_id){
    alert(tab_index +" | +" acc_id);
 };

and call it as you currently do